Html 浮动，100% 高度

Question

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

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

css代码不重要

Answer 1

尝试使用 vh 单位：

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

Answer 2

您可以做的最简单的事情是将节和页脚元素包装在 'wrapper' 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' 来更语义化 :).

Answer 3

这是一个可以在 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>

Html 浮动，100% 高度

Html floating, 100% height

html

css

positioning

floating