专业编程基础技术教程

网站首页 > 基础教程 正文

css设置高度height: 100%滚动条无法显示的解决办法

ccvgpt 2024-08-04 12:10:49 基础教程 17 ℃

有是在写样式的时候,会碰到给div无论怎么加样式 overflow-y: auto 的时候,都不会出现垂直的滚动条,经过不断折腾终于知道是啥原因导致了。

<style>

css设置高度height: 100%滚动条无法显示的解决办法

body{

height: 100%; //若是所有的div的高度都不固定,需要body高度也是100%,才可以出现滚动条

}

.parent{

//你自己样式

height: 100%; //父元素的高度也需要是100%才可以出现滚动条

}

.children{

overflow-y: auto;

overflow-x: hidden;

height: 100%;

}

</style>


<div class="parent">

<div class="children">

xx-blog主题

xxzhuti主题网

</div>

</div>

大家可以试试,这样子是无法出现滚动条的,若是想要出现滚动条,需要所有父元素的高度也要是百分之百,这样才可以。

还有一种就是给父元素设置浮动,也可以出现滚动条,按照你自己页面的需求写即可。

<style>

.parent{

height: 100%; //父元素的高度也需要是100%才可以出现滚动条

position: fixed;

right: 0;

top: 0;

bottom: 0;

z-index: 2;

}

.children{

overflow-y: auto;

overflow-x: hidden;

height: 100%;

}

</style>


<div class="parent">

<div class="children">

xx-blog主题

xxzhuti主题网

</div>

</div>

Tags:

最近发表
标签列表