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

Question

I want a header that is 70px and below it, two columns that take up the rest of the screen height, and do not extend past the screen height. 我想要一个70px及以下的标题，两列占据屏幕高度的其余部分，并且不超过屏幕高度。 The left column is 100% width. 左列为100％宽度。 The right column is 30% width and is on top of (overlaying) the left column. 右列的宽度为30％，位于左列的上方（上方）。

My problem here is that #left and #right have heights that are 100% of the page height + 70px from the header. 我的问题是#left和#right高度是页面高度的100％+距标题的70px。 How do I get rid of those 70px from the height? 如何摆脱高处的那些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 https://codepen.io/riyoyukai/pen/MEGaBR

Answer 1

When you tell an element to be height: 100% it takes the full height of its parent. 当您告诉元素height: 100%它将采用其父元素的全高。

In this case, you've set #wrapper to height: 100% . 在这种情况下，您已将#wrapper设置为height: 100% 。

Since #wrapper is a child of body , which also has height: 100% , it takes the full viewport height. 由于#wrapper是body的子代，它的height: 100%也为height: 100% ，因此它占据了整个视口的高度。

But #wrapper has a sibling – header – with height: 70px . 但是#wrapper有一个同级header ， height: 70px 。

So when you add 70px to 100% you get an overflow (and a vertical scrollbar in this case). 因此，当您将70px添加到100％时，会出现溢出（在这种情况下为垂直滚动条）。

Here's one clean and simple solution: 这是一个干净简单的解决方案：

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

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

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

Answer 2

you can use -webkit-scrollbar to modify, hide or style the scrollbar 您可以使用-webkit-scrollbar修改，隐藏或设置滚动条样式

if you want to hide all scrollbars you can do this, 如果要隐藏所有滚动条，可以执行此操作，

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

if you want to hide scrollbar of a specific element you can do this, 如果您想隐藏特定元素的滚动条，可以执行此操作，

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

for some reason this method does not work with css class selectors so you'll have to use id to select the element. 由于某种原因，此方法不适用于CSS类选择器，因此您必须使用id来选择元素。

you can also modify the scrollbar like, 您还可以修改滚动条，例如

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

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

here's how you hide it 这是你如何隐藏它

 ::-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>

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-10-09 21:16:39

解决方案2
0 2017-10-09 22:04:32

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-10-09 21:16:39

解决方案2 0 2017-10-09 22:04:32

解决方案1
2 已采纳 2017-10-09 21:16:39

解决方案2
0 2017-10-09 22:04:32