html设置页面大小始终100%,HTML – 如何让页脚和页眉的浏览器宽度为100％,但保持80％之间的所有内容...

恕我直言Flexbox是要走的路,但自从Micheal_B完成了覆盖后,我将展示其他造型的基本定位和大杂烩.

我通常从身体开始,应该设置其余布局的步伐.我看到身体是80％,我可以99％的信心说限制身体的尺寸从未完成.

One thing that worked for me was changing 100% to 100vw but not understanding why 100% isn’t working.One thing that worked for me was changing 100% to 100vw but not understanding why 100% isn’t working.

100％长度(即宽度或高度)表示它是元素父级的100％(即包含所讨论元素的元素).因此,例如,如果您在标题上设置100％,则告诉浏览器“将标题的高度设置为正文宽度的100％”.即使它听起来合乎逻辑,但它并不是将身体视为它的父亲,它实际上是指html元素.我不会进入血腥的细节,所以请阅读这个article.这听起来非常违反直觉所以我总是应用位置：相对于身体,使得它的尺寸以视口(实际屏幕的边缘)为参考.当你注意到100vh有效时,100％不是100vh,这是因为vh和vw测量总是像html元素一样被引用到视口,就像它的位置：相对时的身体一样.

@font-face{

font-family:Bebas;

src:url(BEBAS.TTF);

}

body {

position: relative;

width: 100vw;

margin: 0 auto;

height: 100vh;

background: blue;

overflow: hidden;

}

.header {

top: 0;

position: absolute;

left: 0;

right: 0;

background: #ff6200;

height: 10%;

width: 100%;

color: white;

font-family: Bebas;

}

.header .call {

line-height: 100%;

vertical-align: middle;

}

.navbar {

position: absolute;

top: 10%;

left: 0;

}

.row {

width: 80%;

background: red;

margin: 0 auto;

height: 80%;

position: absolute;

top: 10%;

bottom: 10%;

left: 10%;

right: 10%;

}

.footer {

width: 100%;

height: 10%;

background: green;

position: absolute;

bottom: 0;

left: 0;

right: 0;

}

.callme {

font-variant: small-caps;

font-style: normal;

font-size: 20px;

font-weight: 900;

color: #fc4;

}

.col-md-8 {

width: 66%;

height: 100%;

display: inline-block;

border-right: 3px dashed black;

}

.col-md-4 {

width: 33%;

height: 100%;

display: inline-block;

}

section {

text-align: center;

}

Call us now!

777.77.7777.777

logo

.col-md-8

.col-md-4