2017-05-02 46 views
1

ここで、divはページの残りの部分に完全に伸びていません。 身長/身長:100%を使用。事が、下記CSSの高さ〜最小の高さ:100%が動作しない

を動作していないがaspxページのコードは、だから、主な問題は、私は残りのページの残りの部分におかしくdiv要素を伸ばす方法です

<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 { 高さ:100%; } – Amal

+0

のような問題があるようですが、divboxボディはそれを子どもにラップしていません firebugでハイライトされた領域を取得することはできません –

答えて

1

あなたはvhユニットを使用することができます。 100vhは、ビューポートの高さの100%です。これは、親の高さを設定する必要とgood supportを持っていません - すべてのブラウザとIE> = 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 dudeは、 vhで、 その作業 –

+0

@NewbieProgrammer歓迎です、 'vh'と' vw'は素晴らしいです。 –

0

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

は適用されません。私は

.divBody { height: 80% !important; ... に変更し、ラッパーdivはページの高さ全体に広がっているように見えました。もしあなたがそうしていれば、高さ属性をオーバーライドしているものを把握することもできます。

Chromeには素晴らしいDevToolsがあります。 Chromeでページを右クリックして、inspectを押してください。項目をマウスでクリックすると、対応するコンテナが強調表示されます。セレクタのCSSを変更して、リアルタイムで変更を確認することができます。

関連する問題