gpt4 book ai didi

html - Div 以适合页面并展开/滚动

转载 作者:行者123 更新时间:2023-11-28 01:45:29 24 4
gpt4 key购买 nike

我有一个页面,我在其中设置了一个 div,其中将放置所有内容。我让 div 按我想要的方式工作,但是当我进入显示所有记录的管理页面时,我注意到我无法向下滚动以查看其余部分。

我设法解决了这个问题,这样我就可以向下滚动页面下方的内容。但是,需要向下滚动的页面在 div 的右侧有一个滚动条,而不是实际页面(最右侧)。我已经使用 overflow-y:hidden 删除滚动条,但我无法向下滚动。

我很想知道是否有人有任何建议,以便从 div 中删除滚动条并仅在需要时显示标准滚动条。这是当前代码:

Current

HTML

<html class="no-js" lang="en">
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/Base.css"/>
</head>

<body>
<div class="wrapper">
<p> Duplicate text to test </p>
</div>
</body>
</html>

CSS

*
{
margin: 0;
padding: 0;
}

html
{
height: 100%;
}

body
{
background-image:url('../images/background.png');
font-family: Arial;
color: #000000;
font-size: 14px;
height: 100%;
}

.wrapper
{
width: 62.5%;
height: 100%;
overflow:auto;
background: #fffac8;
margin: 0 auto;
box-shadow: 0px 0px 10px 0px #000000;
}

如果从 div 中删除 overflow:auto,我可以像任何普通页面一样向下滚动,但随后 div 会被剪切到标准页面。

Overflow removed from div (Want it like this but with the div still stretching when needed)

最佳答案

在 .wrapper CSS 规则中,尝试使用 min-height 而不是 height。

 .wrapper 
{
width: 62.5%;
min-height: 100%;
overflow:auto;
background: #fffac8;
margin: 0 auto;
box-shadow: 0px 0px 10px 0px #000000;
}

关于html - Div 以适合页面并展开/滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23017553/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com