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

您可以做的最简单的事情是将截面和页脚元素包装在“包装”div或您喜欢的任何其他块级元素（旁边，部分，导航等）中，如下所示：

<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％高度

3 个答案: