文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使Divs在水平导航和页脚之间使用100%的高度

问如何使Divs在水平导航和页脚之间使用100%的高度
EN

Stack Overflow用户
提问于 2015-02-09 05:30:32
回答 3查看 462关注 0票数 0

我一直在搜索这个，并且尝试了这个页面上给出的每一个解决方案，但是由于某种原因，我没有找到为什么给定的解决方案不能在我的项目中工作。

我需要left_wrapper和right_wrapper使用100%的高度，也需要页脚总是在底部。

这是我的代码：

代码jsdfiddle.net

HTML

代码语言：javascript
复制
<!DOCTYPE html>
<div class="global_wrapper">
<header>
<img src="imagenes/imagen.png" alt="logo" class="logo">
</header>
<nav class="menuhorizontal"> <strong>

  <li><a href="#.php" class="item1">Inicio</a></li>
  <li><a href="#.php" class="item1">cosa2</a></li>
  <li><a href="#.php" class="item1">cosa3</a></li>
  <li><a href="# 51.php" class="item1">&Aacuterea 51</a></li>
   </strong>

</nav>
<div class="content_wrapper">
    <div class="left_column">pendejadas a la izquierda</div>
    <div class="right_wrapper">A Helena.
        <br>
        <br>de que se ven rüinas y pedazos.
        <br>Y la dura ocasión de tanto daño
        <br>mientras vencido Paris muere ardiendo
        <br>del griego vencedor duerme en los brazos.
        <br>Lope de Vega.
        <br>
    </div>
</div>
<footer>Aquí</footer>
</div>
</body>

</html>

CSS

代码语言：javascript
复制
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: sans-serif;
background-color: #ccc;
margin: 0;
font-size: 0.9em;
height: 100%;
}
.global_wrapper {
width: 90%;
background-color: transparent;
margin: 0 auto;
min-height: 100%;
position: relative;
}
header {
width: 100%;
height: 100px;
margin: 0 auto;
background-color:orange;
}
header img.logo {
float: left;
max-height: 50px;
max-width: 140px;
margin-top: 25px;
margin-left: 25px;
}
nav.menuhorizontal {
width:100%;
margin: 0 auto;
height: auto;
color: #e1e1e1;
border: 0;
background: #0061a7;
text-align: center;
vertical-align: middle;
line-height: 190%;
}
nav.menuhorizontal li {
list-style: none;
display: inline;
}
nav.menuhorizontal a.item1 {
text-decoration: none;
color: #e1e1e1;
padding-left: 7px;
padding-right: 7px;
border-color:silver;
}
nav.menuhorizontal a.item1:hover {
background: #e1e1e1;
color:#0061a7;
padding: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
-webkit-transition: background-color .30s ease-in-out;
-moz-transition: background-color .30s ease-in-out;
-o-transition: background-color .30s ease-in-out;
transition: background-color .30s ease-in-out;
}
.content_wrapper {
width: 100%;
margin: auto;
padding-bottom: 100px;
overflow: hidden;
}
.left_column {
display: block;
width: 25%;
float: left;
background-color:#de9e47;
padding: 1.7%;
box-sizing: border-box;
}
.right_wrapper {
display: block;
width:75%;
float: left;
background-color: #e1e1e1;
padding: 1.7%;
box-sizing: border-box;
height: 100%;
}
footer {
clear:both;
width: 100%;
height: 100px;
margin: 0 auto;
background-color:orange;
text-align: center;
bottom: 0;
left: 0;
padding: 2%;
box-sizing: border-box;
position: absolute;
}
css
html
wrapper
footer
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-02-09 05:40:45

您必须在css ...like left_column位置:left_column和它的父位置:相对位置中进行更改。right_wrapper浮子:对，就是这样，你就会得到你想要达到的目标。

​

代码语言：javascript
复制
html {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    font-family: sans-serif;
    background-color: #ccc;
    margin: 0;
    font-size: 0.9em;
    height: 100%;
}
.global_wrapper {
    width: 90%;
    background-color: transparent;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
}
header {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background-color:orange;
}
header img.logo {
    float: left;
    max-height: 50px;
    max-width: 140px;
    margin-top: 25px;
    margin-left: 25px;
}
nav.menuhorizontal {
    width:100%;
    margin: 0 auto;
    height: auto;
    color: #e1e1e1;
    border: 0;
    background: #0061a7;
    text-align: center;
    vertical-align: middle;
    line-height: 190%;
}
nav.menuhorizontal li {
    list-style: none;
    display: inline;
}
nav.menuhorizontal a.item1 {
    text-decoration: none;
    color: #e1e1e1;
    padding-left: 7px;
    padding-right: 7px;
    border-color:silver;
}
nav.menuhorizontal a.item1:hover {
    background: #e1e1e1;
    color:#0061a7;
    padding: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    -webkit-transition: background-color .30s ease-in-out;
    -moz-transition: background-color .30s ease-in-out;
    -o-transition: background-color .30s ease-in-out;
    transition: background-color .30s ease-in-out;
}
.content_wrapper {
    width: 100%;
    margin: auto;
    padding-bottom: 100px;
    overflow: hidden;
    position:relative;
}
.left_column {
    display: block;
    width: 25%;
    float: left;
    background-color:#de9e47;
    padding: 1.7%;
    box-sizing: border-box;
    position:absolute;
    height:100%;
}
.right_wrapper {
    display: block;
    width:75%;
    float: right;
    background-color: #e1e1e1;
    padding: 1.7%;
    box-sizing: border-box;
    height: 100%;
}
footer {
    clear:both;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background-color:orange;
    text-align: center;
    bottom: 0;
    left: 0;
    padding: 2%;
    box-sizing: border-box;
    position: absolute;
}
代码语言：javascript
复制
<div class="global_wrapper">
    <header>
        <img src="imagenes/imagen.png" alt="logo" class="logo">
    </header>
    <nav class="menuhorizontal"> <strong>
       
      <li><a href="#.php" class="item1">Inicio</a></li>
      <li><a href="#.php" class="item1">cosa2</a></li>
      <li><a href="#.php" class="item1">cosa3</a></li>
      <li><a href="# 51.php" class="item1">&Aacuterea 51</a></li>
       </strong>

    </nav>
    <div class="content_wrapper">
        <div class="left_column">pendejadas a la izquierda</div>
        <div class="right_wrapper">A Helena.
            <br>
            <br>de que se ven rüinas y pedazos.
            <br>Y la dura ocasión de tanto daño
            <br>mientras vencido Paris muere ardiendo
            <br>del griego vencedor duerme en los brazos.
            <br>Lope de Vega.
            <br>
        </div>
    </div>
    <footer>Aquí</footer>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2015-02-09 06:32:08

更改this..and时还会提到.left_column的高度

css

代码语言：javascript
复制
.content_wrapper {
width: 100%;
overflow: scroll;
position: absolute;
height: 49%;/*increase it as you need*/
}

如果你觉得很难理解的话，一定要问

票数 0
EN

Stack Overflow用户

发布于 2015-02-09 06:39:26

为什么不能尝试用jquery来实现这一点呢？

脚本

代码语言：javascript
复制
$(document).ready(function () {
    changeHeight();
    window.resize();
    $(window).resize(function () {
        changeHeight();
    });
});
$(document).change(function () {
    changeHeight();
});

function changeHeight() {
    $(".left_column, .right_wrapper").css({
        "height": "100%"
    });
    var headerHeight = $("header").height();
    var navHeight = $(".menuhorizontal").height();
    var footerHeight = $("footer").height();
    var bodyHeight = $('body').height();
    var wrapperHeight = (bodyHeight - (headerHeight - navHeight - footerHeight));
    console.log(wrapperHeight);
    $(".content_wrapper, .left_colulmn, .right_wrapper").height(wrapperHeight);
}

小提琴演示

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/28403365

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档