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

Question

我一直在寻找这个并尝试了此页面上给出的所有解决方案，但出于某种原因我还没有找到为什么给定的解决方案不适用于我的项目。

我需要 left_wrapper 和 right_wrapper 使用 100% 的高度，还需要页脚始终在底部。

这是我的代码：

HTML

<!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

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;
}

Answer 1

您必须在 css 中进行更改...例如 left_column position:absolute 及其父级 position:relative。 right_wrapper float:right 就是这样，你会得到你想要达到的目标..

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;
}

<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>

Answer 2

更改此..并提及 .left_column

的高度

css

.content_wrapper {
width: 100%;
overflow: scroll;
position: absolute;
height: 49%;/*increase it as you need*/
}

如果觉得难懂就问

Answer 3

为什么你不能用 jquery 来实现这个目标？？

脚本

$(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);
}

Fiddle Demo

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

How to make Divs to use 100% height between horizontal nav and footer

html

css

footer

wrapper

css