Html 浮动，100% 高度答案

【问题标题】：Html floating, 100% heightHtml 浮动，100% 高度
【发布时间】：2016-05-08 16:12:29
【问题描述】：

我正在尝试制作我的网站，但屏幕大小有问题。我想让它有点响应，我的布局是 - 顶部的标题，然后是菜单和页脚，但它的宽度为 25%，我不知道如何将其调整为 100% 的高度。我希望它看起来像这样： http://s32.postimg.org/9pa325s3p/img.png
我的代码：

<header>header </header>
<section id="menu">menu</section>
<footer>footer </footer>

css 代码并不重要。

【问题讨论】：

使 html 正文高度 100% 见这里stackoverflow.com/questions/13609531/…
我需要将header(40px)+menu(?)+footer(40px)的高度设置为100%。
选择器(高度: calc(100% - 80px); }

标签： html css positioning floating

【解决方案1】：

尝试在那里使用vh 单位：

#menu {
  height: calc(100vh - 80px);
}

【讨论】：

这适用于大多数但不是所有浏览器。看到这个usage table

【解决方案2】：

这是一个适用于 CSS3 之前的浏览器的解决方案。

菜单和页脚位于包装 div 中。包装器 div 获取 height:100% 并使用 margin-top:-40px 从页面顶部开始。包装器 div 获取 position:relative 以便内部的所有元素都相对于该容器元素定位。

对于菜单，我们使用top:40px 绝对定位，因此我们不会重叠页眉，而bottom:40px 则在页脚之前停止。

页脚样式很明显 - position:absolute 和 bottom:0 所以我们点击了页面底部。

<style>
header {
    height:40px;
    background-color:yellow;
}
#menufootercontainer {
    position:relative;
    height:100%;
    margin-top:-40px;
    position:relative;
}
#menu {
    width:80px;
    position:absolute;
    top:40px;
    bottom:40px;
    background-color:green;
}
footer {
    width:80px;
    height:40px;
    position:absolute;
    bottom:0;
    background-color:red;
}
</style>

<header>header</header>
<div id="menufootercontainer">
<section id="menu">menu</section>
<footer>footer</footer>
</div>

【讨论】：

【解决方案3】：

您可以做的最简单的事情是将节和页脚元素包装在“包装器”div 中，或者您喜欢的任何其他块级元素（aside、section、nav 等）中，如下所示：

<div ID="sidebar-wrapper">
    <header>header </header>
    <section id="menu">menu</section>
    <footer>footer </footer>
</div>

完成此操作后，只需将#sidebar-wrapper 设置为 100% 的高度和 25% 的宽度即可。最后，以百分比的形式为您的菜单和页脚指定所需的高度。

#sidebar-wrapper {
  width: 25%;
  height: 100%;
}
section {
  height: 90%; 
}
footer {
height: 10%
}

完成后，您的布局应该与图片中的一样。

P.S：如果您打算在该部分元素中包含导航链接（我想您会这样做），您应该使用“nav”而不是更具语义性:)。

【讨论】：