全高與骨架樣板

我試圖讓每個部分標記都有100％的高度，但它不起作用。全高與骨架樣板

這裏是我的html代碼：

<div class="container"> 
    <div class="row"> 
     <div class="twelve columns"> 
     <section> 
      <h4>Basic Page</h4> 
      <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p> 
     </section> 

     </div> 
    </div> 
    </div>

CSS代碼：

section { 
    height: 100%; 
    background-color: #ccc; 
}

skeleton.css和normalize.css作爲下載

來源

2015-11-10 Scope

請在提問時提供相關的css文件 – justinw

height: 100%;是相對於父母的height。這意味着如果您未設置未定義的父元素'height,100%未定義。

您需要爲.twelve元素設置明確的height（如果這是%，那麼對於它的父母等等）。

也看到這些：

height: 100% not working

CSS height 100% percent not working

來源

2015-11-10 01:41:50 justinw

謝謝！ @Quoid – Scope

Hi @Scope如果這個或任何答案已經解決了你的問題，請點擊複選標記考慮[接受它]（http://meta.stackexchange.com/q/5234/179419）。這向更廣泛的社區表明，您已經找到了解決方案，併爲答覆者和您自己提供了一些聲譽。沒有義務這樣做。 – justinw

應設置html, body {height: 100%;}那麼.container到100％，然後section的定位，以絕對的實現，作爲百分比高度是相對於其父母/容器計算的。

您可以將您的部分設置爲height: 100vh;以實現此目的。只需要注意填充和邊距，因爲該部分可能比視口變大。 :)

Made a jsbin。 *無骨架

我不認爲它與'骨架'有任何關係。

This是理解css單元的最佳視頻。

來源

2015-11-10 01:57:26 juanmnl

全高與骨架樣板

回答

相關問題