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

我想要一个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; 
}

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

来源

2017-10-09 Riyo

不知道，我了解这里的问题。这听起来像你不希望你的内容上面有70px，但是你的头部元素被设置为70px的高度，最小高度为70px。从CSS中移除高度和最小高度可以消除滚动条。 – Josh

当你告诉一个元素是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

来源

2017-10-09 21:16:39

可以使用-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>

来源

2017-10-09 22:04:32 Nabil

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

回答

相关问题