恕我直言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