使用內容div填充可用空間的頁眉/內容頁面

-4

所以我試圖創建一個簡單的頁眉/內容佈局，其中內容部分延伸到窗口的底部。用CSS做這件事看起來是不可能的，因爲考慮到佈局的簡單性，不會引入太多的複雜性。使用內容div填充可用空間的頁眉/內容頁面

請告訴我一個單一的原因，爲什麼我不應該這樣做

body, html { height: 100%; padding: 0; margin: 0; } 
#h{ height: 150px; } 
#tbl { height: 100%; } 

<table id="tbl" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td id="h">header</td> 
    </tr> 
    <tr> 
    <td>content</td> 
    </tr> 
</table>

不要告訴我語義，如何表不爲佈局做。今天看來，大多數網頁設計師都是虐待狂，他們每天都花幾個小時嘗試以非常複雜的方式構建簡單的佈局，因爲他們喜歡用無關緊要的東西來折磨自己。我可以聽到你已經說過了「但是......但是......約翰用div而不是桌子是最新的時髦事情，你不希望我們被其他網頁設計師嘲笑嗎？」

來源

2014-02-05 John

Sooo ..表格佈局...是的...不要這樣做。（是的，我讀過這個問題，只是不得不說。） – Ruddy

「最新潮流的事情」。 :)等等，是2003年嗎？這是一個愚蠢的拖釣崗位。如果你想使用表格，請將自己擊倒。 – Will

Ruddy如何表CSS的東西不能做或需要荒謬愚蠢的伎倆做？ – John

我個人的看法：

使用表格佈局就像是用咖啡來保持清醒。不要經常這樣做。也許曾經有一段時間。

肯定是we shouldn't hassle people who use table-based layouts，特別是當there's no sound, cross-browser way to do a particular layout in CSS。

也就是說......

1.表使其難以多個屏幕尺寸一次

響應式佈局設計是非常重要的，這些天。對不同的視口尺寸應用不同的CSS規則，適用於相同的HTML代碼，是使網站適應所有屏幕的好方法。

儘管對於非常簡單的設計，基於表格的佈局可以在任何屏幕尺寸下工作。

2.表可以與搜索引擎索引，屏幕閱讀器和其他自動網頁解析

換句話說，搜索引擎優化和可訪問性沒有那麼好乾涉。

但是，值得指出的是Google has recently been optimizing its search algorithm區分佈局表和數據表。

還有一些技巧，如<table role="presentation">來幫助屏幕閱讀器處理表格，雖然those hacks can get complicated。

3。基於表格的佈局需要在更改佈局時更改HTML標記

此外，它更好，更概念純粹 - 通常更易於維護 - 僅將HTML用於內容/語義，因此您可以離開當您進行設計更改時，單獨使用標記。但實際上，通過重新設計，您通常需要對HTML進行更改。總而言之，我認爲準則和最佳實踐比關於表格佈局的硬性規定更有用。這是一種平衡的行爲，並且在某些情況下，表格可以是一個更好的選擇。

來源

2016-01-19 08:58:37 jkdev

我們不再使用表格佈局，因爲它們不是語義的。機器人和屏幕閱讀器無法識別內容的好處。其次，你需要將你的內容與代碼分開來進行佈局（職責分配）。

擁有外部CSS文件將使您的頁面更容易維護。如果你有20多個頁面都有一個表格來保存內容，那麼你將非常喜歡編輯所有這些文檔以進行重新設計。如果您使用CSS並且具有良好的文檔佈局寬度標識符，則只需更改一個.css文件即可更改所有佈局。

您有問題。您希望在標題項目下有一個內容區域。如果你想，但確實可以用更復雜的CSS來解決，但不是必須的。

首先你會開始你的頭寬。您可以使用<div>或使用標題（h1-h6）項目。就像每個機器人都會知道>「哦！標題，這很重要！」

讓構建您的文檔：

<body> 
<h1>Header</h1> 
<div class="static-content"> 
    <p>Content</p> 
</div> 
</body>

我們有一個標題和一個div寬度的類名「靜態內容」佈局的原因。您可以將此名稱更改爲任何您想要的內容（無空格並開始輸入字母字符），也可以添加多個類，並用空格分隔。

這裏是一些CSS

html, body { 
    height: 100%; 
    margin:0; 
    background-color: gray; 
    padding: 0; 
} 

h1 
{ 
    display: block; 
    padding: 20px 10px; 
    background-color: blue; 
    margin: 0px 0px 0px 0px; 
} 

.static-content 
{ 
    background-color: red; 
    padding: 10px; 
    margin: 0; 
}

所以。正如你可以在這裏看到的小提琴：http://jsfiddle.net/NicoO/rC66e/2/ 你的內容區域可以是紅色的（就像它是）。但你也看到了灰色的背景。背景中的元素是body，您可以像幾乎任何div一樣使用身體。

所以你看，你已經把你的內容區域延伸到瀏覽器的底部。如果你想要紅色區域也在底部，你可以有多種選擇來評估這一點。

在這裏看到小提琴：http://jsfiddle.net/NicoO/rC66e/3/ 還有其他方法可以實現這一點。

更新。如果你真的想要這個紅色區域很大，你可以嘗試這樣的： http://jsfiddle.net/NicoO/rC66e/5/

這不是一個很好的解決方案，因爲我不知道你想用它來做什麼。你只需設計一個body元素，你就可以走了。如果你想要更復雜的佈局，你將不得不添加適應你的CSS。在這個小提琴中的解決方案不是通用的，因爲它應該是。但它表明，你可以做很多事情寬度的CSS。即使你沒有真正向我們展示你的用例。

編輯：你一直在說「爲什麼我不只是一個雙排桌子？」。但另一方面，你試圖在這裏改變這個規則的答案。爲什麼你不只是一個標題和一個段落？像<h1>Title</h1><p>content</p>你可以添加一個背景顏色到body元素並完成。沒有理由在這裏做任何事情。

最終修改：您有一個有效的@John點。有時CSS會是一種痛苦。但它遠遠優於桌面佈局。對於大多數常見的問題，像增長的網格系統這樣的工具可以解決大部分問題。 W3C正在努力使CSS更加強大且易於使用。例如，新的顯示：網格;屬性。如果你真的給了CSS一個機會，並嘗試添加一個關於盒子模型的新思維模式，它會幫助你很多。使用HTML和CSS，您可以直接編寫您所需要的內容，而不必一直擁有笨拙的表格。如果我冒犯了你，我很抱歉。但我建議你權衡表與CSS佈局的利弊。有相當不錯的東西，周圍像自適應版式，你將無法充分利用這些寬度舊技術

來源

2014-02-05 13:45:40

底部計數從窗口的底部改爲。你去那裏：http://jsfiddle.net/rC66e/4/ 不行，添加更多的詭計。 – John

你倒了我的阿韋瑟？我現在不再回答你了。看最後一次編輯。願IE6的力量永遠對你有利 –

@NicoO不要因爲你有一個贊成票而感到不安，因爲我會爲你的努力付出努力，但仇恨者會恨，所以你不必停止回答。 .. –

使用內容div填充可用空間的頁眉/內容頁面

回答

相關問題