将div强制为父div高度的100％而不指定父对象的高度-Java 学习之路

443

我有一个具有以下结构的网站：

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

navigation 在左侧， content div 在右侧 . content div 的信息是通过PHP引入的，所以每次都不一样 .

如何垂直缩放 navigation ，使其高度与内容 div 的高度相同，无论加载哪个页面？

24 回答

140

NOTE ：此答案适用于不支持Flexbox标准的旧版浏览器 . 有关现代方法，请参阅：https://stackoverflow.com/a/23300532/1155721

我建议你看一下Equal Height Columns with Cross-Browser CSS and No Hacks .

基本上，使用CSS以浏览器兼容的方式执行此操作并非易事（但对于表格而言微不足道），因此请找到适合您的预打包解决方案 .

此外，答案取决于您是想要100％高度还是相同高度 . 通常它的高度相等 . 如果它是100％高度，答案会略有不同 .

回复于 2024-05-02T07:22:35+08:00
1
对于父母：
```
display: flex;
```
你应该添加一些前缀，http://css-tricks.com/using-flexbox/ .

编辑：正如@Adam Garner所说，align-items：stretch;不需要 . 它的用途也适用于父母，而不是孩子 . 如果要定义子项拉伸，请使用align-self .
```
.parent {
  height: 150px;
  background: red;
  padding: 10px;
  display:flex;
}

.child {  
  width: 100px;
  background: blue;
}
```
```
<div class="parent">
  <div class="child"></div>
</div>
```
回复于 2024-05-02T07:22:35+08:00
-3
这是一个令人沮丧的问题，一直与设计师打交道 . 诀窍是你需要在CSS中的BODY和HTML上设置高度为100％ .
```
html,body {
    height:100%;
}
```
这个看似毫无意义的代码是为浏览器定义100％的含义 . 令人沮丧，是的，但这是最简单的方法 .
回复于 2024-05-02T07:22:35+08:00
10

我发现将两列设置为 display: table-cell; 而不是 float: left; 效果很好 .

回复于 2024-05-02T07:22:35+08:00

如果您不介意在意外短的内容div中剪辑导航div，那么至少有一种简单的方法：

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

另外还有faux-columns技术 .

回复于 2024-05-02T07:22:35+08:00

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

回复于 2024-05-02T07:22:35+08:00

使用jQuery：

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

回复于 2024-05-02T07:22:35+08:00

1
尝试将底部边距设为100％ .
```
margin-bottom: 100%;
```
回复于 2024-05-02T07:22:35+08:00

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

看this example .

回复于 2024-05-02T07:22:35+08:00

474

height : <percent> 仅在您拥有指定百分比高度的所有父节点且顶层具有固定高度（以像素，ems等为单位）时才有效 . 这样，高度将级联到您的元素 .

您可以指定100％的html和body元素，如前面所述的@Travis，以使页面高度级联到您的节点 .

回复于 2024-05-02T07:22:35+08:00
2
经过长时间的搜索和尝试，没有解决我的问题，除了
```
style = "height:100%;"
```
关于儿童div

并为父母申请
```
.parent {
    display: flex;
    flex-direction: column;
}
```
另外，我正在使用bootstrap，这并没有破坏对我的响应 .
回复于 2024-05-02T07:22:35+08:00

基于此article中描述的方法，我创建了.Less动态解决方案：

Html:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

Less:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

回复于 2024-05-02T07:22:35+08:00

我知道问题已经过了很长时间，但是我发现了一个简单的解决方案，并且认为有人可以使用它（抱歉英语很差） . 在这里：

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

简单的例子 . 请注意，您可以转变为响应能力 .

回复于 2024-05-02T07:22:35+08:00

在RWD项目中，最好的方法是使用jQuery . 对于小屏幕，您可能希望保持高度自动，因为col1，col2和col3彼此堆叠 .

但是，在媒体查询断点之后，您希望cols彼此相邻，并且所有列的高度相等 .

1125 px只是窗口宽度断点的一个示例，之后您希望将所有列设置为相同的高度 .

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

当然，如果需要，您可以设置更多断点 .

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            if (window.innerWidth>= 1125) {
              $('.col1').height($('.wraper').height());
              $('.col2').height($('.wraper').height());
              $('.col3').height($('.wraper').height());
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

回复于 2024-05-02T07:22:35+08:00

7
问题的 Headers 和内容有点矛盾 . Headers 说的是父div，但这个问题听起来好像你想要两个兄弟div（导航和内容）的高度相同 .

您是否希望导航和内容都是主要高度的100％，或者（b）希望导航和内容高度相同？

我假设（b）......如果是这样的话，我不认为你能够在你当前的页面结构（至少不是纯CSS和没有脚本）的情况下做到这一点 . 您可能需要执行以下操作：
```
<main div>
    <content div>
         <navigation div></div>
    </div>
</div>
```
并将内容div设置为具有导航窗格宽度的左边距 . 这样，内容的内容位于导航的右侧，您可以将导航div设置为内容高度的100％ .

编辑：我完全在脑子里这样做，但你可能还需要将导航div的左边距设置为负值或将其绝对左边设置为0把它推回最左边 . 问题是，有很多方法可以解决这个问题，但并非所有方法都能与所有浏览器兼容 .
回复于 2024-05-02T07:22:35+08:00
0

[在另一个答案中提到Dmity的Less代码]我猜这是某种“伪代码”？

从我的理解尝试使用应该做的技巧的人造柱技术 .

http://www.alistapart.com/articles/fauxcolumns/

希望这可以帮助：）

回复于 2024-05-02T07:22:35+08:00
1

这个技巧确实有效：在你的HTML部分中添加一个清晰的样式的最后一个元素：both; <div style =“clear：both;”> </ div>
之前的所有内容都将包含在高度中 .

回复于 2024-05-02T07:22:35+08:00
1

给我的孩子工作 position: absolute;

回复于 2024-05-02T07:22:35+08:00

我的解决方案

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

回复于 2024-05-02T07:22:35+08:00

你用CSS Flexbox

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

回复于 2024-05-02T07:22:35+08:00

15
如前所示，flexbox是最简单的 . 例如 .
```
#main{ display: flex; align-items:center;}
```
这会将所有子元素与父元素中的中心对齐 .
回复于 2024-05-02T07:22:35+08:00
6
```
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }
```
从：

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

说明bootstrap，但你不需要bootstrap来使用它 . 回答这个老问题，因为这对我有用，而且看起来很容易实现 .

这是我为此提供的相同答案Question
回复于 2024-05-02T07:22:35+08:00
1

将 display: grid 添加到父级

回复于 2024-05-02T07:22:35+08:00
95
最简单的方法是伪造它 . List Apart已经多年来广泛涵盖了这一点，like in this article from Dan Cederholm from 2004 .

这是我通常这样做的方式：
```
<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        
    </div>
    <div id="content" style="float:left;width:750px;">
        
    </div>
</div>
```
通过将#container包装在另一个div中，将头部div嵌入为＃container的兄弟，并将边距和宽度样式移动到父容器，可以轻松地在此设计中添加 Headers . 此外，应该将CSS移动到单独的文件中，而不是保持内联等 . 最后，可以在positioniseverything上找到clearfix类 .
回复于 2024-05-02T07:22:35+08:00

将div强制为父div高度的100％而不指定父对象的高度

24 回答

相关问题