Html浮动，100%高度_Html_Css_Positioning_Floating

Html浮动，100%高度

html css

Html浮动，100%高度,html,css,positioning,floating,Html,Css,Positioning,Floating,我试图使我的网站，但我有问题的屏幕大小。我想让它有点响应性，我的布局是-页眉在顶部，然后是菜单和页脚，但它的宽度是25%，我不知道如何将其调整为100%高度。我希望它看起来像这样：我的代码：标题菜单页脚 css代码并不重要。尝试使用vh单元： #menu { height: calc(100vh - 80px); } 尝试在那里使用vh装置： #menu { height: calc(100vh - 80px); } 您可以做的最简单的事情是将section和footer元

我试图使我的网站，但我有问题的屏幕大小。我想让它有点响应性，我的布局是-页眉在顶部，然后是菜单和页脚，但它的宽度是25%，我不知道如何将其调整为100%高度。我希望它看起来像这样：
我的代码：

标题
菜单
页脚

css代码并不重要。

尝试使用

vh

单元：

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

尝试在那里使用

vh

装置：

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

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

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

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

注：如果您计划在该section元素中有导航链接（我想您会这样做），您应该使用“nav”来更具语义：）。

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

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

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

注：如果您计划在该部分元素中有导航链接（我想您会这样做），您应该使用“nav”来更具语义：）。

这里有一个在CSS3之前的浏览器中可以使用的解决方案。

菜单和页脚位于包装器div内。包装器div获得

高度：100%

，并使用

页边距顶部：-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>


标题{
高度：40px；
背景颜色：黄色；
}
#menufootercontainer{
位置：相对位置；
身高：100%；
利润上限：-40px；
位置：相对位置；
}
#菜单{
宽度：80px；
位置：绝对位置；
顶部：40px；
底部：40px；
背景颜色：绿色；
}
页脚{
宽度：80px；
高度：40px；
位置：绝对位置；
底部：0；
背景色：红色；
}
标题
菜单
页脚

这里有一个解决方案，可以在CSS3之前的浏览器中使用。