Question

我想要一个70px及其下方的标题，两列占据屏幕高度的其余部分，并且不会超出屏幕高度。左列为100％宽度。右栏的宽度为30％，位于左栏的上方（覆盖）。

我的问题是#left和#right的高度是页面高度的100％+标题的70px。如何从高处摆脱那些70px？

*{
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
    width:100%;
}

header{
    height: 70px;
    min-height: 70px;
    position: relative;
    background: lightyellow;
}

#wrapper{
    height: 100%;
    background: lightgray;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

#left{
    background: gold;
}

#right{
    width: 30%;
    height: 100%;
    position: absolute;
    right: 0;
    background: tomato;
    opacity: 0.7;
}

https://codepen.io/riyoyukai/pen/MEGaBR

Answer 1

当您告诉某个元素为height: 100%时，它会占据其父级的全部高度。

在这种情况下，您已将#wrapper设置为height: 100%。

由于#wrapper是body的孩子，也有height: 100%，因此它占据了整个视口高度。

但#wrapper有一个兄弟姐妹 - header - height: 70px。

因此，当您添加70px到100％时，会出现溢出（在这种情况下为垂直滚动条）。

这是一个简洁明了的解决方案：

#wrapper{
    height: calc(100% - 70px);
}

#right{
    height: calc(100% - 70px);
}

https://codepen.io/anon/pen/wrjKOx

Answer 2

您可以使用-webkit-scrollbar修改，隐藏或设置滚动条的样式

如果你想隐藏所有滚动条，你可以这样做，

::-webkit-scrollbar {
   display: none;
}

如果你想隐藏特定元素的滚动条，你可以这样做，

#element::-webkit-scrollbar {
    display: none;
}

由于某种原因，此方法不适用于css类选择器，因此您必须使用id来选择元素。

您也可以修改滚动条，

::-webkit-scrollbar {
    width: 0.6em;
    background: white;
}

/* Handle */
::-webkit-scrollbar-thumb {    
    background: rgba(0,0,0,0.8);
}

这是你如何隐藏它

::-webkit-scrollbar {
     display: none;
}

*{
	margin: 0;
	padding: 0;
}

html, body{
	height: 100%;
	width:100%;
}

header{
	height: 70px;
	min-height: 70px;
	position: relative;
	background: lightyellow;
}

#wrapper{
	height: 100%;
	background: lightgray;
    display: -webkit-flex;
    display: -ms-flexbox;
	display: flex;
}

#left{
	background: gold;
}

#right{
	width: 30%;
	height: 100%;
	position: absolute;
	right: 0;
	background: tomato;
	opacity: 0.7;
}

<body>
	<header></header>
	<div id="wrapper">
		<div id="left">
			Vegan blog Truffaut irony deep v Etsy. You probably haven't heard of them Schlitz chambray art party craft beer Echo Park mixtape, deep v fashion axe Wes Anderson twee McSweeney's DIY. Retro twee polaroid 3 wolf moon, Bushwick locavore organic skateboard keffiyeh Kickstarter Williamsburg sustainable Godard sartorial trust fund. Stumptown paleo put a bird on it VHS hella. Put a bird on it mixtape Godard, vegan farm-to-table letterpress chia hella. Meggings DIY freegan normcore gastropub blog. Dreamcatcher wolf kitsch biodiesel lomo jean shorts, pug fap Odd Future craft beer stumptown locavore cornhole put a bird on it salvia.
		</div>
		
		<div id="right">
			Right content
		</div>
	</div>
</body>

如何在不使用overflow：hidden的情况下摆脱滚动条？

2 个答案: