CSS How to set div height 100% minus nPx

前端未结

关注

 11  1315

I have a wrapper div which contans 2 divs next to each other. Above this container I have a div that contains my header. The wrapper div must be 100% minus the height of the

相关标签:

11条回答

醉梦人生

2020-12-02 04:52
If you need to support IE6, use JavaScript so manage the size of the wrapper div (set the position of the element in pixels after reading the window size). If you don't want to use JavaScript, then this can't be done. There are workarounds but expect a week or two to make it work in every case and in every browser.

For other modern browsers, use this css:
```
position: absolute;
top: 60px;
bottom: 0px;
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

暖寄归人

2020-12-02 04:52

This doesn't exactly answer the question as posed, but it does create the same visual effect that you are trying to achieve.

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>

0 讨论(0)

名媛妹妹

2020-12-02 04:54

If you don't want to use absolute positioning and all that jazz, here's a fix I like to use:

your html:

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

your css:

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}

0 讨论(0)

北恋

2020-12-02 04:57

You can do something like height: calc(100% - nPx); for example height: calc(100% - 70px);

0 讨论(0)
发布评论:

提交评论
- 加载中...

自闭症患者

2020-12-02 04:57

div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

Make sure while using less

height: ~calc(100% - 60px);

Otherwise less is no going to compile it correctly

0 讨论(0)

不知归路

2020-12-02 04:59

great one... now i have stopped using % he he he... except for the main container as shown below:

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

and here is the css:

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

i tested this in all known browsers and is working fine. Are there any drawbacks using this way?

0 讨论(0)

1 2 下一页