css height~min-height：100％不起作用

时间：2017-05-02 02:51:50

标签： html css

这就是事情，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扩展到其余页面的剩余部分？

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

此致

2 个答案:

答案 0 :(得分：2)

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

未被应用。我把它改成了

.divBody { height: 80% !important; ... 并且包装器div似乎扩展了页面的整个高度。如果您愿意，还可以找出覆盖高度属性的内容。

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

相关问题
最新问题