How can I do width = 100% - 100px in CSS?

前端未结

关注

 18  834

In CSS, how can I do something like this:

width: 100% - 100px;

I guess this is fairly simple but it is a bit hard to find examples showing

相关标签:

18条回答

挽巷

2020-12-12 13:38

Setting the body margins to 0, the width of the outer container to 100%, and using an inner container with 50px left/right margins seems to work.

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>

0 讨论(0)

时光取名叫无心

2020-12-12 13:41
You need to have a container for your content div that you wish to be 100% - 100px
```
#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>
```
You might need to add a clearing div just before the last </div> if your content div is overflowing.
```
<div style="clear:both; height:1px; line-height:0">&nbsp;</div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
北荒

2020-12-12 13:41
Could you do:
```
margin-right: 50px;
margin-left: 50px;
```
Edit: My solution is wrong. The solution posted by Aric TenEyck suggesting using a div with width 100% and then nesting another div using the margins seems more correct.
0 讨论(0)
发布评论:

提交评论
- 加载中...
遥遥无期

2020-12-12 13:45
CSS can not be used to animation, or any style modification on events.

The only way is to use a javascript function, which will return the width of a given element, then, subtract 100px to it, and set the new width size.

Assuming you are using jQuery, you could do something like that:
```
oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);
```
And with native javascript:
```
oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';
```
We assume that you have a css style set with 100%;
0 讨论(0)
发布评论:

提交评论
- 加载中...
一个人的身影

2020-12-12 13:46
Modern browsers now support the:
```
width: calc(100% - 100px);
```
To see the list of supported browser versions checkout: Can I use calc() as CSS unit value?

There is a jQuery fallback: css width: calc(100% -100px); alternative using jquery
0 讨论(0)
发布评论:

提交评论
- 加载中...

借酒劲吻你

2020-12-12 13:46

Padding on the outer div will get the desired effect.

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>

0 讨论(0)

1 2 3 下一页