css height~min-height:100% 不起作用答案

【问题标题】：css height~min-height:100% not workcss height~min-height:100% 不起作用
【发布时间】：2017-05-02 11:18:27
【问题描述】：

事情就是这样，div 没有完全伸展到页面的其余部分。使用高度/最小高度：100%；事情但不工作

下面是aspx页面代码

<div class="wrapper">
        <div class="divHeader">
            <div class="divContainer">
            <div class="divContentLeft">
                <a href="Dashboard.aspx"><img src="../images/logo.png" /></a>
            </div>
            <div class="divContentLeft">
                <div class="divContentRow"></div>
                <div class="divContentRow"></div>

                <div class="divContentRow">
                    <div class="divContentLeft">
                        <a href="Dashboard.aspx"><span>Some Title Here</span></a>
                    </div>
                </div>
                <div class="divContentRow">
                    <div class="divContentLeft">
                        <a href="#"><img src="../images/menu_icon.png" height="20px" width="20px" onclick="" /></a>
                    </div>
                </div>
            </div>
            </div>
        </div>        
        <div class="divBody">
            <div class="divContentLeft" style="min-height:100%; height:100%;">
                <div class="menu-bar">
                    <ul class="menu-bar-ul" runat="server" id="divMenuBar">

                    </ul>
                </div>
            </div>
                <div class="divContentLeft">                    
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                    </asp:ContentPlaceHolder>                    
                </div>

        </div>    
        <div class="divFooter">

        </div>
    </div>

还有CSS

body {  
    font-family: Helvetica, Arial, sans-serif;
}

.divHeader a {
    text-decoration:none;
    color:#000;
    font-weight:800;
}

.wrapper {
    padding:0;
    margin:0 auto;
    min-height:100%;
    height:100%;
    width:100%;
}

.divHeader, .divBody, .divFooter {
    padding:5px;
}

.divHeader {
    height:15%;
    clear:both;
    display:block;
    background-color:#CFCFC4;
    width:100%;
    border-bottom: 1px dotted gray;
}

.divBody {
    height:80%;
    width:100%;
    display:block;
    padding:0;
    margin:0 auto;
    clear:both;
    min-height:80%;
    height:auto;
}

.divFooter {
    height:5%;
    width:100%;
    display:block;
    margin:0 auto;
    padding:0;
    clear:both;
}

.divContentLeft {
    margin:0 auto;
    float:left;
    display:inline-block;
    position:relative;
}
.divContainer {
    clear:both;
    display:inline-block;
}

.divContentRow {
    width:100%;
    display:inline-block;
}

.divContentHeader {
    width:100%;
    height:20%;
    border-radius:25px;
    display:inline-block;
    margin:10px;
    padding:5px;
}

.divContentDetail {
    width:100%;
    height:80%;
    border-radius:25px;
    display:inline-block;
    margin:10px;
    padding:5px;
}


.ui-widget-header {
    background:#b39eb5;
}

.divContentTextbox {
    float:left;
    margin-left:15px;
    display:inline-block;
}

.divContentLabel {
    float:left;
    margin-left:15px;
}

* {
    padding: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.divMenuBarBlock {
    float:left;
    width:100%;
    height:100%;
}

.menu-bar {
    float:left;
    min-height:100%;
    width:100%;
    height:100%;
    background: #CFCFC4;
}

.menu-bar a{
    display:block;
    padding: 10px 10px 10px 10px;
    text-decoration:none;
    border-bottom: 1px dotted gray;
    color: #000;
    letter-spacing: .002em;
    text-transform: uppercase;
    font-family:Helvetica, Arial, sans-serif;
    font-style:normal;
    font-size:medium;
}

.menu-bar li{
    list-style:none;
}

.menu-bar ul li ul li:hover {
    background:gray;
}

.menu-bar-ul ul {
    display:none;
}

.no-sub:hover {
    background:gray;
}

.sub-arrow {
    margin-left:15px;
}

.menu-bar-ul li.click ul {
    display:block;
}

.menu-bar .sub-arrow:after {
    content:'\203A';
    float:right;
    margin-right:10px;
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
}

.menu-bar li.click .sub-arrow:after {
    content: '\2039';
}

.menu-bar-ul ul a:before {
    content:'\203A';
    margin-right:10px;
}

那么，主要的问题是我如何将该死的 div 拉伸到剩余页面的其余部分？

因为我的导航菜单栏只要那里唯一显示的项目就会伸展内容也不会延伸到页面的其余部分

问候

【问题讨论】：

stackoverflow.com/help/mcve
试试这个 html, body { height: 100%; }
似乎问题是 div 主体没有包裹它的孩子，因为我无法在萤火虫上获得任何突出显示的区域
divBody 的子元素没有高度...因为它是空的

标签： html css

【解决方案1】：

您可以使用vh 单位。 100vh 是视口高度的 100%。这不需要设置父母的身高并且有good support - 所有浏览器，即> = 9。

body {  
    font-family: Helvetica, Arial, sans-serif;
}

.divHeader a {
    text-decoration:none;
    color:#000;
    font-weight:800;
}

.wrapper {
    padding:0;
    margin:0 auto;
    min-height:100vh;
    width:100%;
}

.divHeader, .divBody, .divFooter {
    padding:5px;
}

.divHeader {
    height:15%;
    clear:both;
    display:block;
    background-color:#CFCFC4;
    width:100%;
    border-bottom: 1px dotted gray;
}

.divBody {
    height:80%;
    width:100%;
    display:block;
    padding:0;
    margin:0 auto;
    clear:both;
    min-height:80%;
    height:auto;
}

.divFooter {
    height:5%;
    width:100%;
    display:block;
    margin:0 auto;
    padding:0;
    clear:both;
}

.divContentLeft {
    margin:0 auto;
    float:left;
    display:inline-block;
    position:relative;
}
.divContainer {
    clear:both;
    display:inline-block;
}

.divContentRow {
    width:100%;
    display:inline-block;
}

.divContentHeader {
    width:100%;
    height:20%;
    border-radius:25px;
    display:inline-block;
    margin:10px;
    padding:5px;
}

.divContentDetail {
    width:100%;
    height:80%;
    border-radius:25px;
    display:inline-block;
    margin:10px;
    padding:5px;
}


.ui-widget-header {
    background:#b39eb5;
}

.divContentTextbox {
    float:left;
    margin-left:15px;
    display:inline-block;
}

.divContentLabel {
    float:left;
    margin-left:15px;
}

* {
    padding: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.divMenuBarBlock {
    float:left;
    width:100%;
    height:100%;
}

.menu-bar {
    float:left;
    min-height:100%;
    width:100%;
    height:100%;
    background: #CFCFC4;
}

.menu-bar a{
    display:block;
    padding: 10px 10px 10px 10px;
    text-decoration:none;
    border-bottom: 1px dotted gray;
    color: #000;
    letter-spacing: .002em;
    text-transform: uppercase;
    font-family:Helvetica, Arial, sans-serif;
    font-style:normal;
    font-size:medium;
}

.menu-bar li{
    list-style:none;
}

.menu-bar ul li ul li:hover {
    background:gray;
}

.menu-bar-ul ul {
    display:none;
}

.no-sub:hover {
    background:gray;
}

.sub-arrow {
    margin-left:15px;
}

.menu-bar-ul li.click ul {
    display:block;
}

.menu-bar .sub-arrow:after {
    content:'\203A';
    float:right;
    margin-right:10px;
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
}

.menu-bar li.click .sub-arrow:after {
    content: '\2039';
}

.menu-bar-ul ul a:before {
    content:'\203A';
    margin-right:10px;
}

<div class="wrapper">
  <div class="divHeader">
    <div class="divContainer">
      <div class="divContentLeft">
        <a href="Dashboard.aspx"><img src="../images/logo.png" /></a>
      </div>
      <div class="divContentLeft">
        <div class="divContentRow"></div>
        <div class="divContentRow"></div>

        <div class="divContentRow">
          <div class="divContentLeft">
            <a href="Dashboard.aspx"><span>Some Title Here</span></a>
          </div>
        </div>
        <div class="divContentRow">
          <div class="divContentLeft">
            <a href="#"><img src="../images/menu_icon.png" height="20px" width="20px" onclick="" /></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="divBody">
    <div class="divContentLeft" style="min-height:100%; height:100%;">
      <div class="menu-bar">
        <ul class="menu-bar-ul" runat="server" id="divMenuBar">

        </ul>
      </div>
    </div>
    <div class="divContentLeft">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

      </asp:ContentPlaceHolder>
    </div>

  </div>
  <div class="divFooter">

  </div>
</div>

【讨论】：

thx 老兄，看来我必须用 vh 测量高度/宽度，它的工作原理
@NewbieProgrammer 不客气，vh 和 vw 很棒。

【解决方案2】：

.divBody { height: 80%; ... }

没有被应用。我把它改成

.divBody { height: 80% !important; ... 并且包装器 div 似乎扩展了页面的整个高度。如果您愿意的话，您还可以弄清楚是什么覆盖了 height 属性。

Chrome 有一个很棒的 DevTools。只需右键单击 Chrome 中的页面并点击检查。当您将鼠标悬停在项目上时，它们对应的容器会突出显示。您可以更改选择器 css 并实时查看更改。

【讨论】：