Html漂浮,100%高度

时间:2016-05-08 16:12:29

标签: html css positioning floating

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

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

css代码并不重要。

3 个答案:

答案 0 :(得分:2)

尝试在那里使用vh单位:

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

答案 1 :(得分:0)

您可以做的最简单的事情是将截面和页脚元素包装在“包装”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'代替更多的语义:)。

答案 2 :(得分:0)

以下是适用于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>