没有额外'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布局

回答

相关问题