下面的滾動div的固定標題div

我試圖將兩個div放在另一個的上面。最高的一個有固定的大小。最底層的頁面需要填充頁面高度的其餘部分，如果頁面內容太大，則不會使頁面更高。下面的滾動div的固定標題div

<div id="content"> 
    <div id="top-padding"></div> 
    <div id="stuff"> 
     some content 
     <br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br> 
     End of content. 
    </div> 
</div><!-- content -->

我嘗試到目前爲止是：http://jsfiddle.net/b4fEE/

我的問題是，綠色DIV太大。我需要的方式來指定它的高度

100% - 30px

我寧願做在純CSS，但如果有必要，我會訴諸使用Javascript/jQuery的。

來源

2013-03-08 SteveP

@SteveP：#stuff { overflow- X：自動; background-color：lightgreen; } – ankurtr 2013-03-08 12:49:35

嘗試'身高：calc（100％-30px）;'帶有供應商前綴 – 2013-03-08 12:49:48

@SteveP：試試我的解決方案。有用。 :-) – ankurtr 2013-03-08 12:51:03

試試這個：

#stuff { 
    overflow-x:auto; 
    background-color: lightgreen; 
    top:30px; /* as the height of the other div is 30px */ 
    left:0; 
    right:0; 
    bottom:0; 
    position:absolute; 
}

Working Fiddle

來源

2013-03-08 12:34:50

標籤只是一種使內容大於可用空間的方式來強制滾動條出現。 – SteveP 2013-03-08 12:50:53

感謝您的css建議。它對我來說非常合適，謝謝。 – SteveP 2013-03-08 12:51:30

@SteveP歡迎您。 :) – 2013-03-08 12:52:22

在如果有人想解決在正常流動此一致的東西的情況下，如今這可以通過使用flexbox佈局模型來完成，如下圖所示：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
#content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 300px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    background-color: #C9E6FF; 
 
} 
 
#top-padding { 
 
    height: 30px; 
 
    flex: none; 
 
    background: blue; 
 
} 
 
#stuff { 
 
    flex: auto; 
 
    overflow-y: auto; 
 
    background-color: lightgreen; 
 
} 
 
/*for demo purpose */ 
 

 
#stuff p { 
 
    height: 1000px; 
 
}

<div id="content"> 
 
    <div id="top-padding"></div> 
 
    <div id="stuff"> 
 
    <p>some content</p> 
 
    </div> 
 
</div>

來源

2016-04-19 12:25:54

而且在如果有人想解決這個事情保持在正常流量和不使用Flex話，那麼解決方法如下：

html, 
 
    body { 
 
     height: 100%; 
 
    } 
 

 
    body { 
 
     margin: 0; 
 
    } 
 

 
    #content { 
 
     height: 100vh; 
 
     position: relative; 
 
     background-color: #C9E6FF; 
 
     margin: 0 auto; 
 
     width: 300px; 
 
    } 
 

 
    #top-padding { 
 
     background: blue; 
 
     height: 30px; 
 
    } 
 

 
    #stuff { 
 
     overflow-x:auto; 
 
     background-color: lightgreen; 
 
     height: calc(100vh - 30px); 
 
    }

<div id="content"> 
 
    <div id="top-padding"></div> 
 
     <div id="stuff"> 
 
      <p>Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...</p> 
 
     </div> 
 
    </div>

來源

2016-04-19 12:44:17

下面的滾動div的固定標題div

回答

相關問題