CSS如何设置div高度为100％减去一些像素

我想设计一个网页，这些日子有点困难。CSS如何设置div高度为100％减去一些像素

我有三个主要的divs。第一个是标题，第二个是页脚，第三个是主要内容。页眉和页脚必须固定在页面的顶部和底部。浏览器窗口的大小不会改变它们的位置。第三个div必须在这些div之间的空白处。它可以调整大小以适应调整窗口大小的页面。

主div的高度必须完全改变，因为我想在该div中放置Google地图，所以此div的高度很重要。

我尝试了很多东西，但都没有成功。将div的设置height设置为100％（body和html的高度也是100％）并不是答案。使用一个表格（三行，两行固定高度，一行高度可变，height="100%"）也有一些问题（在IE8中，当我声明doctype时，第二行的div（height:100%）没有再适合细胞！）。

现在我不知道要做这个工作。我能做什么？

注意：我不喜欢使用CSS3，因为与旧浏览器的兼容性对我来说很重要。

来源

2013-02-04 Ahmad

添加一些代码，也许你会得到一些答案。 'margin-bottom：-99 px'或者类似的东西呢？ –

这里有一个很好的答案，使用纯粹的CSS3和谷歌地图工作http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels – Craig

为您的标题使用设定的高度，并使用sticky footer来保持您的页脚为设定高度并与底部对齐。之间的空间应该始终是正确的高度。

来源

2013-02-04 20:32:26 Lrdwhyt

你能解释更多吗？我认为我之前做过这样的事情，但没有用。 – Ahmad

@ user1919959关于你需要什么有点不清楚，但是如果链接上的布局是你想要的，即页眉和页脚已经设置高度并且与页面各自对齐，并且身体将改变高度取决于窗口的内容或大小，那么这是我最好的建议。 – Lrdwhyt

好吧，我知道，但这种方法创建滚动条，这不是我的目标。我错了吗？ – Ahmad

您应该尝试众所周知的Clearfix hack来处理高度问题，因为您需要“清除”父母元素以获得所需的完整100％高度。

来源

2013-02-04 20:37:20 Ruffo

我不明白我怎么能用它来解决我的问题？ – Ahmad

你可以尝试这样的事情。

HTML

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

CSS

#header { 
    height:50px; 
    width: 100%; 
    background: black; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
} 

#body { 
    height:100%; 
    width: 100%; 
    background: #CCC; 
    position: absolute; 
    z-index: 0; 
} 

#footer { 
    height: 50px; 
    width: 100%; 
    background: #0CF; 
    position: fixed; 
    bottom: 0; 
}

这里是一个小提琴 - http://jsfiddle.net/6M59T/

来源

2013-02-04 20:39:50 Swordfish0321

谢谢，但是这段代码为页面创建了一个滚动条。我想要一些没有任何滚动条的页面。 – Ahmad

看到我更新的小提琴。 – Swordfish0321

你太近了，但是，但是......我的问题很混乱！我必须为该地图添加一些边框和阴影。这不适合我！ – Ahmad

这是CSS的缺点之一。你只用这三个div就无法完成你想要的东西。您需要使用额外的div来抵消页眉和页脚的高度。这里是如何解决这个问题：

<body style="height:100%; margin:0; padding:0;"> 
    <div id="header" style="height:50px; position: relative; z-index: inherit; background-color:lightblue;"></div> 
    <div id="content" style="height:100%; margin:-50px 0 -70px 0; background-color:wheat"> 
     <div id="header-offset" style="height:50px;"></div> 
     <div id="footer-offset" style="height:70px;"></div> 
    </div> 
    <div id="footer" style="height:70px; background-color:lightblue;"></div> 
</body>

来源

2014-02-08 10:59:06 user3072466

CSS如何设置div高度为100％减去一些像素

回答

相关问题