CSS如何将div height设置为100%减去一些像素_Css_Html_Resize_Height

CSS如何将div height设置为100%减去一些像素

css html

CSS如何将div height设置为100%减去一些像素,css,html,resize,height,Css,Html,Resize,Height,这些天我在尝试设计一个有点难的网页我有三个主要部门。第一个用于页眉，另一个用于页脚，第三个用于主要内容。页眉和页脚必须固定在页面的顶部和底部。它们的位置不能随浏览器窗口的大小而改变。第三div必须在这些div之间的空白处。它可以通过调整窗口大小来调整页面大小主分区的高度必须完全改变，因为我想在该分区中放置一个谷歌地图，所以该分区的高度很重要我尝试了很多事情，但都没有成功。将div的height设置为100%（而body和html的高度也为100%）并不是答案。使用表（有三行，两行高度固定，

这些天我在尝试设计一个有点难的网页

我有三个主要部门。第一个用于页眉，另一个用于页脚，第三个用于主要内容。页眉和页脚必须固定在页面的顶部和底部。它们的位置不能随浏览器窗口的大小而改变。第三div必须在这些div之间的空白处。它可以通过调整窗口大小来调整页面大小

主分区的高度必须完全改变，因为我想在该分区中放置一个谷歌地图，所以该分区的高度很重要

我尝试了很多事情，但都没有成功。将div的

height

设置为100%（而body和html的高度也为100%）并不是答案。使用表（有三行，两行高度固定，一行高度可变，有

height=“100%”

）也有一些问题（在IE8中，当我声明了

doctype

，第二行的div（高度为

100%

）不再适合单元格！）

现在我不知道做这项工作。我能做什么

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

使用设置的页眉高度，并将页脚保持在设置的高度并与底部对齐。然后，中间的空间应该始终是正确的高度。

您应该尝试众所周知的方法来处理高度问题，因为您需要“清除”父元素以获得所需的100%高度。

您可以尝试类似的方法

HTML

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

这里有一个小问题-

这是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>

添加一些代码，也许你会得到一些答案。关于

页边距底部：-99 px

或者类似的东西呢？这里有一个很好的答案，它使用纯CSS3并与Google Maps一起工作。你能解释更多吗？我想我以前做过类似的事情，但它没有用。@user1919959你需要什么有点不清楚，但是如果链接上的布局是你想要的，也就是说，页眉和页脚设置了高度，并与页面的各自侧面对齐，而正文将根据窗口的内容或大小改变高度，这是我的最佳建议。好的，我知道，但这种方法会创建滚动条，这不是我的目标。我错了吗？@user1919959我在示例站点上没有看到任何滚动条-你真的实现了它并获得了滚动条吗？你不应该是对的，但问题是我们不能在两个高度中间有一个div。高度是如此重要，因为谷歌地图。我认为JQuery是最好的方法。谢谢，但是这段代码为页面创建了一个滚动条。我想要一些没有任何滚动条的页面。你离我很近，但是，但是…，我的问题太让人困惑了！我必须在地图上添加一些边界和阴影。这对我没用！我认为最好的方法是使用jQuery。不可能！user1919959我不知道你现在在说什么@哈哈。我不明白我怎么能用它来解决我的问题？？！！

<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>