logo标签列表

如何在不指定父元素高度的情况下强制子元素 div 高度为父元素 div 的 100%？

htmlcss
737
我有一个网站，其结构如下：
<div id="header"></div>

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

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

导航栏在左侧，内容区域在右侧。内容区域的信息通过 PHP 动态获取，因此每次加载页面时都不同。

我该如何垂直缩放导航栏，以使其高度与内容区域的高度相同，无论加载哪个页面？

2
在父元素上使用display: table，在子元素上使用display: table-cell。这将使子元素与父元素一样长。请参见https://dev59.com/cWEh5IYBdhLWcg3wMA0t。 - user31782
16
你可以为 div#main 设置 display: flex; align-items: stretch;，但不要对 div#content 使用 height: 100%。 - Ihor
31个回答
14

尝试将底部边距设为100%。

margin-bottom: 100%;
6
或者添加padding-bottom: 100%;。这不是非常精确，但对某些情况很有效。 - Jason
padding-bottom 在我的情况下很管用。这个解决方案非常类似于 @Roman Kuntyi 发布的内容。 - Greg0ry
12
在父元素上添加 display: grid。
10

针对2021年读者：

请尝试以下操作：

.parent {
  position: relative;

  display: flex;                 // And you will probably need this too.
  flex-direction: row;           // or column.
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;

  align-self: center;            // And you will probably need this too.
}

这是我正在处理的内容：

5
根据这篇文章描述的方法（链接），我创建了一个.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;
            }
        }
    }
}
4
您可以将 display: flex 添加到 div#main，并将 align-self: stretch 添加到 div#navigation。
<div id="header"></div>

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

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

// CSS file
#main {
  display: flex;
}

#navigation {
  align-self: stretch;
}
请显示完整的代码。 - parsecer
@parsecer，你可以看到更新后的代码。 - ClusterH
3
我知道这个问题已经很久了，但我找到了一个简单的解决方案，希望能对某些人有用（抱歉我的英语不太好）。下面是解决方案：
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>

一个简单的例子。请注意，您可以将其转换为响应式布局。

哦，我忘了：如果你想将.sidebar内容垂直居中，只需将“vertical-align: top”更改为“vertical-align: middle”。 - Paula Fleck
2

我可能有点晚了，但我找到了一个解决方法，可能有点hack。

首先给父元素设置flex和高度为100vh。

像这样：

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;/* Can be less depends on the container, basically this forces the element to expand */
}
如果父级是您的视口，那么它会起作用。但通常在更高级的布局中，您会发现有几个嵌套的容器，如果您将嵌套的容器设置为100vh，最终会出现边距和滚动条显示的问题。 - A A
2

我的解决方案：

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});
2
你使用 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>

1
问题的标题和内容有点矛盾。标题提到了一个父级div，但问题的描述让人感觉你想要两个兄弟div（导航和内容）具有相同的高度。
你是想让导航和内容都占据主区域的100%高度，还是想让它们的高度相等？
我假设你是想让它们的高度相等……如果是这样，考虑到你当前的页面结构（至少不使用纯CSS和无脚本），我认为你可能无法实现。你可能需要做一些像这样的事情：
<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

并将内容div的左边距设置为导航窗格的宽度。这样，内容的内容就在导航栏的右侧，您可以将导航div设置为内容高度的100％。

编辑：我完全是凭想象做的，但您可能还需要将导航div的左边距设置为负值或将其绝对左边设置为0，以将其推回到最左边。问题是，有许多方法可以完成此操作，但并非所有方法都与所有浏览器兼容。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接