2017-05-02 167 views
1

這是事情,div沒有完全伸展到頁面的其餘部分。 使用高度/最小高度:100%;的事情,但沒有工作css高度〜最小高度: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; 
} 

所以,主要的問題是我如何拉伸再用股利剩餘頁面的其餘部分?

因爲我的導航菜單欄伸展只要唯一顯示的項目有 也內容不被拉伸到頁面

問候其餘

+1

http://stackoverflow.com/help/mcve – Rob

+1

試試這個html,body { height:100%; } – Amal

+0

好像問題是div身體不換它的孩子 ,因爲我不能讓上螢火 –

回答

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>

+0

THX的傢伙沒有高度......,看來我必須測量高度/寬度與vh, 其工作 –

+0

@NewbieProgrammer不用客氣,'vh'和'vw'很棒。 –

0

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

未施加。我將其更改爲

.divBody { height: 80% !important; ... 並且包裝div似乎可以擴展頁面的整個高度。你也可以找出什麼是重寫高度屬性,如果你是如此傾向。

Chrome擁有出色的DevTools。只需在Chrome中右鍵點擊一個頁面並點擊即可。當您將鼠標懸停在項目上時,其相應的容器將突出顯示您可以更改選擇器css並實時查看更改。