Q

給人體瀏覽器的100％高度

2015-10-11 65 views 2 likes

2

我有這樣的：給人體瀏覽器的100％高度

我想這樣：

我已經試過這樣：

html, body 
{ 
    height: 100%; //and this -> 100vh 
}

但它沒有奏效。

這裏是我的代碼：

https://jsfiddle.net/zbjaaxe6/9/

任何解決方案？

2015-10-11 userfloflo

+1

你試過給容器'高度：100％' - https://jsfiddle.net/61eguhw4/ –

+1

''在你的HTML中沒有任何地方......可能是複製粘貼錯誤。你的問題是有道理的。你要求的身高是100％！ –

+1

請參閱CSS：https://jsfiddle.net/zbjaaxe6/18/ –

A

回答

2

「與大衆/ VH，我們可以調整大小的元素相對於視口的大小而言，vw/vh單位是有趣的，因爲1單位反映的是視口的寬度的1/100，要使視圖的寬度爲整個元素的1/100，例如，你將它設置爲寬度：100vw。「

- 喬納森·斯努克，漿紗隨着CSS3的大衆和VH單位

CSS：

[class*="col"] { 
    border: 1px solid black; 
} 

#menu{ 
    display:none; 
    margin-top:20px; 
    position:absolute; 
    background: #fff; 
    z-index: 1; 
} 

body { 
    font: caption; 

} 

#content{ 
    min-height: 90vh;  
} 

#footer{ 
    min-height: 5vh;  
} 

#header{ 
    min-height: 5vh;  
}

HTML：

<div class="container"> 
    <div class="row"> 
      <!-- Small devices >= 768px Collapsed to start, horizontal above breakpoints --> 
      <div id = "header" class="col-xs-10"><span id="btnMenu" class="glyphicon glyphicon-menu-hamburger" aria-hidden="true">TITLE</div> 
      <div id="menu" class="col-xs-3 menu"> 
       MENU 
      </div> 
      <div id="content" class="col-xs-10 content"> 
       </span>CONTENT 
      </div> 
      <div class="col-xs-10" id = "footer">FOOTER</div> 
    </div> 
</div>

2015-10-11 17:38:43

1

並不理想，但你可以使用絕對定位：

.content { 
    position: absolute; 
    top: 20px; 
    bottom: 0; 
}

或者，你可以使用視窗百分比，如果你是冷靜與支持IE9 +：

.content { 
    height: 100vh; 
}

的風格應該是內容部分，而不是html/body。

編輯：fiddle

2015-10-11 17:26:56 Clark

+1

我希望標題+內容+頁腳100％的頁面不僅僅是內容部分。我不想滾動條。 – userfloflo

+0

查看@Michael P. Bazos的回答如下 - 如果您不需要傳統瀏覽器支持，flexbox將是一個很好的解決方案。 – Clark

1

我不知道如果這就是你想要什麼，但看看： https://jsfiddle.net/zbjaaxe6/23/

.content{ 
position: relative; 
margin: 0; 
min-height: 100vh; 
}

2015-10-11 17:32:25

+0

我希望標題+內容+頁腳佔據頁面的100％，而不僅僅是內容部分。我不想滾動條。 – userfloflo

4

這個問題是一個很好的候選爲flex箱：

CSS

body { 
    display: flex; 
    flex-direction: column; 
    margin: 0; 
    min-height: 100vh; // set min-height instead of height, otherwise body won't 
         // grow with content, if content is bigger than viewport 
} 

header { 
    height: 50px; // adjust to what you want 
} 

main { 
    flex: 1;  // This will make the 'main' block to expand ! 
} 

footer { 
    height: 30px; // adjust to what you want 
}

HTML

<body> 
    <header>HEADER</header> 
    <main>MAIN</main> 
    <footer>FOOTER</footer> 
</body>

結果：

Fiddle
Flexbox是一個IE10 +解決方案。 Browser support in detail

2015-10-11 17:43:45

1

我使用flexbox屬性解決了您的問題。

.container, 
.row { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 
#title, 
#footer { 
    flex: none; 
} 
#content { 
    flex: 1 0 auto; 
}

您可以看到here的解決方案。

2015-10-11 17:47:00 marisaroque

相關問題