HTML5 CSS3 100％高度与边距

2023年4月1日 253次阅读

给定以下
HTML布局：

<body>
    <header class="site-header">
    </header>

    <section class="site-section">
    </section>

    <footer class="site-footer">
    </footer>
</body>

我想使用100％的浏览器高度作为页眉,部分和页脚.但是,实现这一点没有问题：

html, body { height:100%; }

.site-header  { height:10%; }
.site-section { height:80%; }
.site-footer  { height:10%; }

我的问题是,如果我想为身体的每个孩子使用保证金,这将不起作用：

body > * { margin:1%; }

无论是否有保证金 – 网站应始终使用100％的浏览器高度.

编辑：
它似乎更适合我使用白色边框代替.但是,同样的问题仍然存在是否可以以百分比指定边框宽度？

最佳答案 我知道这看起来很荒谬,丑陋,愚蠢.实际上,它是.但是我找不到更好的方法来准确地接近你想要的东西,而不会再出现丑陋的标记.

HTML：
    

<header class="site-header">
</header>

<div class="spacer"></div>
<div class="spacer"></div>

<section class="site-section">
</section>

<div class="spacer"></div>
<div class="spacer"></div>

<footer class="site-footer">
</footer>

<div class="spacer"></div>

CSS：

html,body {height:100%;margin:0;} 
body > * { overflow:hidden;}
.spacer {height:1%;}
.site-header {height:8%;background-color:yellow; }
.site-section {height:78%;background-color:#ffcccc; color:#aaa;}
.site-footer {height:8%;background-color:#ccccff;}

DEMO

点赞