我做了一个新的布局,但有边带或边线(我的意思是滚动线“内容太多时,您必须滚动很多”,但此边线在谷歌浏览器的底部)出现在全视口中,不知道为什么如果我将换行宽度从100vw更改为90,在右侧会出现空白,这是不好的。
这是图片:
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="el2">header</div>
<div class="el1">left</div>
<div class="el3">
<div class="el5">pakk1</div>
<div class="el6">pakk1</div>
phakk
</div>
<div class="el4">footer</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.wrap {
width: 100vw;
height: 100vh;
background: grey;
}
.el2 {
width: 100vw;
height: 30vh;
background: #C2FF76;
}
.el1 {
width: 20vw;
height: 70vh;
background: blue;
float:left;
}
.el3 {
float:left;
width: 80vw;
height: 70vh;
background: red;
}
.el4 {
width: 100vw;
height: 13vh;
background: purple;
float:left;
}
.el5 {
width: 30vw;
height: 13vh;
background: green;
float:left;
}
.el6 {
width: 40vw;
height: 13vh;
background: green;
float:right;
}
最佳答案
如果您将溢出隐藏在最上面的容器中,则此问题将消失。
.wrap {
overflow: hidden;
}
最好弄清楚为什么会有溢出,以便您可以解决潜在的问题。
https://css-tricks.com/findingfixing-unintended-body-overflow/
注意:您也只能更改X和Y轴的溢出
https://css-tricks.com/almanac/properties/o/overflow/