如何在不使用溢出的情况下摆脱滚动条:隐藏?
问题描述:
我想要一个70px及以下的标题,两列占据屏幕高度的其余部分,并且不会超出屏幕高度。左栏是100%的宽度。右栏是30%的宽度,位于左栏的上方(重叠)。如何在不使用溢出的情况下摆脱滚动条:隐藏?
我在这里的问题是,#left
和#right
的高度是页眉高度的+ 100px +头部的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;
}
答
当你告诉一个元素是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);
}
答
可以使用-webkit-scrollbar
修改,隐藏或风格的滚动条
,如果你想隐藏的所有滚动条,你可以做到这一点,
::-webkit-scrollbar {
display: none;
}
如果你w蚂蚁隐藏你能做到这一点的特定元素的滚动条,
#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;
}
*{
\t margin: 0;
\t padding: 0;
}
html, body{
\t height: 100%;
\t width:100%;
}
header{
\t height: 70px;
\t min-height: 70px;
\t position: relative;
\t background: lightyellow;
}
#wrapper{
\t height: 100%;
\t background: lightgray;
display: -webkit-flex;
display: -ms-flexbox;
\t display: flex;
}
#left{
\t background: gold;
}
#right{
\t width: 30%;
\t height: 100%;
\t position: absolute;
\t right: 0;
\t background: tomato;
\t opacity: 0.7;
}
<body>
\t <header></header>
\t <div id="wrapper">
\t \t <div id="left">
\t \t \t 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.
\t \t </div>
\t \t
\t \t <div id="right">
\t \t \t Right content
\t \t </div>
\t </div>
</body>
不知道,我了解这里的问题。这听起来像你不希望你的内容上面有70px,但是你的头部元素被设置为70px的高度,最小高度为70px。从CSS中移除高度和最小高度可以消除滚动条。 – Josh