動態大小的網頁設計

我一直在嘗試創建一個動態大小的網頁設計過去幾個小時，但沒有運氣。動態大小的網頁設計

這裏是什麼，我試圖做一個畫面：

enter image description here

基本上，我有一個頭（頂部）和頁腳（在底部）與集高度。我想要它們之間的兩個div，一個菜單和內容區域，它們在頁眉和頁腳之間動態調整大小（高度）。當我調整網站大小時，我希望菜單和內容也要調整大小，因此它們仍然適合。如果內容區域或菜單內的內容高於實際div，滾動條將出現（overflow：auto）。

任何人都可以幫助我嗎？

感謝

來源

2011-04-04 Foob

如果可以避免，我建議不要有多個可滾動區域。是否有理由需要兩個可滾動區域？ – zzzzBov 2011-04-04 20:49:51

沒有辦法使用CSS設置滾動div的高度，只能保持垂直「伸展」。你必須使用JS來獲取頁面大小的視口高度，減去頁眉和頁腳，然後用它設置div的高度。 – 2011-04-04 20:49:57

@zzzzBov：是的，雖然不能詳細介紹。 – Foob 2011-04-04 20:52:44

我去到多列布局：Ultimate multi-column liquid layouts。

來源

2011-04-04 20:47:21

嗯，不完全是我所需要的。我試圖使設計與窗戶的尺寸完全相同......如果這是有道理的。基本上，容器：寬度：100％;身高：100％;溢出：無; – Foob 2011-04-04 20:50:58

-2

要在左右兩側面板上獲得滾動條，我認爲最簡單的方法是使用框架。框架是一個痛苦（或一個窗格......），但他們確實給了無痛的滾動條。

來源

2011-04-04 20:56:46 Jay

我想你不想使用表格，但這似乎是最簡單的方法來實現你想要的，左側和右側列中的iframe。

但是，您也可以使用位置爲div的div，因爲您已經將頁眉的高度和左列的寬度作爲絕對值。簡單地將右列div除以頂部和左側的像素數量即可。

來源

2012-07-12 15:25:35

我建議你使用Bootstrap（http://getbootstrap.com/getting-started/）。如果你在範例下搜索，你肯定會找到符合你需求的東西。

否則，您會在CSS和JavaScript下找到預定義的類。引導程序中的所有元素都具有響應性，並隨屏幕/瀏覽器窗口的大小調整大小。下面你可以看到一個代碼示例。

<body> 
<!--[if lte IE 8]> 
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
<![endif]--> 

<!-- Add your site or application content here --> 
<div class="header"> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 

     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 

     <a class="navbar-brand" href="#/">Template App</a> 
     </div> 

     <div class="collapse navbar-collapse" id="js-navbar-collapse"> 

     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#/">Home</a></li> 
      <li><a ng-href="#/about">About</a></li> 
      <li><a ng-href="#/data">Table</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="container-fluid"> 
<div ng-view=""></div> 
</div> 

<div class="footer"> 
    <div class="container"> 
    <p>Footer</p> 
    </div> 
</div>

來源

2016-01-14 17:45:00 Burnthor

動態大小的網頁設計

回答

相關問題