沒有額外'divs'的CSS佈局

我發現自己使用下面的佈局整個堆，但它令人討厭，它不是很有語義。沒有額外'divs'的CSS佈局

我真的很想爲

<body> 
    <h1>Hi</h1> 
    <nav> Nav content</nav> 
    <main> Application</main> 
</body>

通過我的實驗有沒有辦法做到這一點不煩人「div容器」。最糟糕的是，這種模式可能會進一步發生在應用程序內部，（用說節代替main）。

我試過使用表格佈局，彈性盒，浮動等。我試圖保持它的語義，所以我可以任意轉換內容。（例如受到柔性盒訂購的啓發）。

我通過使用flexbox與包裝關閉，設置'標題'爲100％，所以它包裝，而這個工程，我進入了一個情景，頭或h1首先不是使用內容大小，但一些任意計算flexbox使用，導致它很大。

http://plnkr.co/edit/HJFUqqA6b4ldBBkgDXV6?p=preview

試圖使H1的大小以它的內容align-self:flex-start使其後，插入空白的堆。

我想要的幾乎就像我想象CSS的網格佈局模塊是什麼，但似乎並沒有在任何地方實現。

UPDATE：原因

部分它惹惱我是純粹的存在是爲了支持該佈局。此更新普拉克顯示它

http://plnkr.co/edit/rJgrYM?p=preview

在這裏我要爲上側全長導航欄，與頭坐在了「主」的內容。在語義上它的內容完全相同，只是佈置方式不同，但請注意，我必須更改div所包含的內容。這很糟糕，需要html不良變化的樣式/佈局變化只是感覺不可思議。

來源

2015-05-04 Beau Trepp

你可以使用一些其他的語義元素是'

'''

這不是特別的事實，它的一個div，它的DIV純粹的存在是爲了支持我的佈局的事實。這與文件無關。如果我要採用不同的佈局，div不需要存在 –

讓div支持你的佈局沒什麼問題。儘管你可以嘗試使用像Susy或Singularity這樣的網格系統。 – Darvanen

我給你制定了這個解決方案，通過使用body作爲表格。

h1顯示爲table-caption。因此它顯示在桌子上方，並且不包括它的高度。你需要給它一個固定的高度（以px，em，％等），並在身體的高度上進行補償。

在這種情況下，我給了標頭40px的固定高度，並通過使用calc()方法來補償它。請注意這是compatibility。

html { 
    height: 100%; 
} 
body { 
    display: table; 
    width: 100%; 
    height: calc(100% - 40px); 
} 
h1 { 
    display: table-caption; 
    height: 40px; 
    background: lightblue; 
} 
nav { 
    display: table-cell; 
    width: 20%; 
    background: lightgreen; 
} 
main { 
    display: table-cell; 
    width: 80%; 
    background: lightcyan; 
}

JSFiddle Demo

來源

2015-05-04 08:31:15 LinkinTED

想要標題自然地填充它的內容，而不是強制它到一個固定的高度。與「側面」欄相同。因此，使用flex-grow –

這對側欄沒有任何問題，只需從'nav'和'main'中刪除寬度即可。 'header'是另外一個故事......這是這個設計的唯一限制，它需要一個固定的高度（以px，％，em等等）。 – LinkinTED

使用固定高度的標題，我可能可以在標題上使用display：absolute，並在主體上插入填充以彌補該錯誤。那麼我甚至不需要使用calc。 –

如果你不關心任何資產淨值或主要內容可能大於屏幕高，但你關心的資產淨值是尺寸水平，以適應不僅僅是其內容，而不是任意長度或百分比，你可以去有這樣的看法：

html, 
 
body { 
 
    height: 100%; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
h1 { 
 
    height: 40px; 
 
    background: lightgray; 
 
} 
 
nav { 
 
    float: left; 
 
    height: calc(100% - 40px); 
 
    background: lightblue; 
 
} 
 
main { 
 
    overflow: hidden; 
 
    height: calc(100% - 40px); 
 
    background: lightgreen; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 

 
    <nav>content</nav> 
 
    <main>Main body</main> 
 
</body> 
 

 
</html>

如果你關心高度超過寬度，https://stackoverflow.com/a/30025762/4805350是一個更好的答案。

來源

2015-05-04 09:29:36

如果我不想要一個固定的標題大小怎麼辦？ :) –

一旦實現，你應該能夠使用「高度：填充」而不是calc（100％ - 無論），但是目前afaik對此的支持是不存在的。沒有這個，我需要考慮更多如何做到這一點。 http://dev.w3.org/csswg/css-sizing/#width-height-keywords –

填充聲音真棒！不幸的是，這是一個我認爲沒有一些權衡就不可能完成的問題。這個問題被問到希望一些語義html/css嚮導知道一些顯示屬性，我不知道:) –

沒有額外'divs'的CSS佈局

回答

相關問題