有一個標準的頁眉頁腳佈局HTML網頁，而無需使用table標籤

enter image description here 有一個標準的頁眉頁腳佈局HTML網頁，而無需使用table標籤

我怎樣才能獲得最新的圖像，而無需使用表中顯示？即使瀏覽器窗口調整大小，我也希望佈局跨越整個頁面的高度/寬度。

這是我到目前爲止嘗試過的。它接近，但看起來不專業。

<html> 
<body> 
    <div> 
     <div style="border-style: solid; height: 20%"> 
      Header</div> 
     <div style="overflow: hidden; height: 55%"> 
      <div style="border-style: solid; float: left; width: 20%; height: 100%;"> 
       left</div> 
      <div style="border-style: solid; float: left; width: 57%; height: 100%;"> 
       content</div> 
      <div style="border-style: solid; float: left; width: 20%; height: 100%;"> 
       right</div> 
     </div> 
     <div style="border-style: solid; height: 20%"> 
      Footer</div> 
    </div> 
</body> 
</html>

乾淨，簡單的CSS將不勝感激。

來源

2013-03-26 Foo

查找像Twitter Bootstrap這樣的網格CSS框架。此外，研究CSS的靈活佈局。 – 2013-03-26 02:27:34

你有一個好的開始。我會專注於修改現有代碼並將所有樣式遷移到外部樣式表。你的大綱看起來不像你的形象，因爲你需要內容（或需要設置高度），以便它以這種方式出現。 – djthoms 2013-03-26 02:27:47

使用position: fixed（ALL）與top: 0px;（頂格），right: 0px;（右格）， left: 0px;（左格），bottom: 0px;（下格）沿

固定位置應該在你的情況

幫助

編輯：這裏是代碼的工作：

<div> 
     <div style="border-style: solid; height: 20%; position: fixed; top: 0px; width: 100%;"> 
      Header 
     </div> 
     <div style="overflow: hidden; height: 55%"> 
      <div style="border-style: solid; float: left; width: 20%; height: 60%; position: fixed; left: 0px; top: 20%;"> 
       left 
      </div> 
      <div style="border-style: solid; float: left; width: 55%; height: 60%; position: fixed; top: 20%; left: 20%;"> 
       content 
      </div> 
      <div style="border-style: solid; float: right; width: 20%; height: 60%; position: fixed; right: 0px; top: 20%;"> 
       right 
      </div> 
     </div> 
     <div style="border-style: solid; height: 20%; position: fixed; bottom: 0px; width: 100%;"> 
      Footer 
     </div> 
    </div>

來源

2013-03-26 02:27:38

搞砸了。 – Foo 2013-03-26 02:29:16

你能告訴我它怎麼錯過了？我的意思是應用此代碼後的佈局如何？ – 2013-03-26 02:31:17

您應該閱讀[固定定位]（http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning）以瞭解它，@Foo – djthoms 2013-03-26 02:31:41

富，你需要做的是得到一個良好的基礎在嘗試這個之前在HTML和CSS中。理想情況下，您希望避免內聯樣式（例如style="border: 1px solid black;"）。你不需要固定或絕對定位來實現這一點。基本的HTML/CSS技術是完全可行的。這裏是一個替代的解決方案，以你的要求：

<div class="header"> 
    <div class="header-inner"></div>  
</div> 
<div class="content"> 
    <div class="sidebar left"> 
     <div class="sidebar-inner"></div> 
    </div> 
    <div class="content-inner"></div> 
    <div class="sidebar right"> 
     <div class="sidebar-inner"></div> 
    </div> 
</div> 
<div class="footer"> 
    <div class="footer-inner"></div> 
</div>

而CSS：

/* Temp styles */ 
.header, .sidebar, .content, .footer { border: 5px solid black; } 
.content, .sidebar, .footer { border-top: none; } 
.sidebar.right { border-right: none; } 
.sidebar.left { border-left: none; } 
/* Core styles */ 
.header { 
    position: relative; /* needed for stacking */ 
    height: 100px; 
    width: 100%; 
} 
.content { 
    position: relative; /* needed for stacking */ 
    width: 100%; 
    height: 500px; 
} 
.sidebar { 
    position: relative; /* needed for stacking */ 
    width: 20%; 
    height: 100%; 
    border-top: none; 
} 
.sidebar.left { float: left; } 
.sidebar.left:after, 
.sidebar.right:after { 
    clear: both; 
    content: "\0020"; 
    display: block; 
    overflow: hidden; 
} 
.sidebar.right { float: right; } 
.footer { 
    position: relative; /* needed for stacking */ 
    width: 100%; 
    height: 100px; 
}

這裏是一個demo。採取這個演示，並從中吸取教訓！希望這可以幫助！

來源

2013-03-26 02:42:50 djthoms

這不符合橫跨整個頁面的高度的標準。你的高度硬編碼爲500px; – d512 2013-08-27 22:06:04

這是不言自明的是，固定高度值僅是爲了顯示的原因。我想象中的提問是能夠以小博大，這是僅用於演示的原因。 – djthoms 2013-08-28 04:35:29

卸下固定高度將移動頁腳起來。他希望佈局「跨越整個高度」。 – armin 2015-01-29 14:07:29

CSS：

#header 
{ 
position:fixed; 
top:0px; 
left:0px; 
right:0px; 
height:20%; 
overflow:hidden; 
} 
#leftSide 
{ 
position:fixed; 
top:21%; 
left:0px; 
width:20%; 
bottom:21%; 
} 
#rightSide 
{ 
position:fixed; 
top:21%; 
right:0px; 
width:20%; 
bottom:21%; 
} 
#footer 
{ 
position:fixed; 
height:20%; 
left:0px; 
right:0px; 
bottom:0px; 
} 
#content 
{ 
position:fixed; 
top:21%; 
bottom:21%; 
left:21%; 
width:57%; 
} 
div {display:block; border:1px solid black;}

HTML：

<div id="header">header</div> 
<div id="leftSide">left</div> 
<div id="content">content</div> 
<div id="rightSide">right</div> 
<div id="footer">footer</div>

在這個例子中，我使用fixedposition，但您可以設置overflow-x和overflow-y爲每本的div的。例如：：對於content，您可以對每個格使用overflow-x:hidden和overflow-y:auto或scroll等。當然，在這個例子中頁面將不可滾動。

來源

2014-03-10 20:47:07 nelek

我想你現在已經想出了一個解決方案，因爲問題已經接近兩年了。然而，其他人可能偶然發現這篇文章，所以這是供將來參考：

Take a look at this answer and check the JSFiddles。這是一個使用CSS表格的相對穩固的解決方案（沒有HTML佈局表格）。

來源

2015-01-29 14:17:47 armin

有一個標準的頁眉頁腳佈局HTML網頁，而無需使用table標籤

回答

相關問題