如何在不使用溢出的情况下摆脱滚动条：隐藏？答案

【问题标题】：How do I get rid of the scrollbar without using overflow: hidden?如何在不使用溢出的情况下摆脱滚动条：隐藏？
【发布时间】：2018-03-21 04:07:30
【问题描述】：

我想要一个 70 像素及以下的标题，两列占据屏幕高度的其余部分，并且不超出屏幕高度。左列是 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

【问题讨论】：

不确定我是否理解这里的问题。听起来您不希望内容上方的 70px，但是您将 header 元素设置为 70px 的高度和 70px 的最小高度。从 CSS 中删除该高度和最小高度可以摆脱滚动条。

标签： html css layout flexbox multiple-columns

【解决方案1】：

当您告诉一个元素为height: 100% 时，它会占用其父元素的完整高度。

在本例中，您已将 #wrapper 设置为 height: 100%。

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

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

所以当你将 70px 添加到 100% 时，你会得到一个溢出（在这种情况下是一个垂直滚动条）。

这是一个干净简单的解决方案：

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

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

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

【讨论】：

【解决方案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>

【讨论】：