Fatal编程技术网
  • html/
  • Html 将div设置为height:100%将禁用滚动条

Html 将div设置为height:100%将禁用滚动条

html css

Html 将div设置为height:100%将禁用滚动条,html,css,height,scrollbar,overflow,Html,Css,Height,Scrollbar,Overflow,我有以下代码，我想让2个div标记占据浏览器提供的所有可用高度 <!DOCTYPE html> <html> <head> <title>test</title> <style> .container { display: flex; flex-direction: row; } .left {

我有以下代码，我想让2个div标记占据浏览器提供的所有可用高度

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
        }
        .left {
            height: 100%;
            display: block;
            width: 50%;
            background-color: green;
            overflow-y: scroll;
        }
        .right {
            height: 100%;
            background-color: red;
            display: block;
            width: 50%;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            Text
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
        <div class="right">
            Text
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
    </div>
</body>
</html>


测试
.集装箱{
显示器：flex；
弯曲方向：行；
}
.左{
身高：100%；
显示：块；
宽度：50%；
背景颜色：绿色；
溢出y：滚动；
}
.对{
身高：100%；
背景色：红色；
显示：块；
宽度：50%；
溢出y：滚动；
}
正文























































































<














































<
正文
正文























































































<














































<
正文
我已经决定设置高度：100%，但这会禁用div的各个滚动条-有人知道如何使滚动条工作并使div占据浏览器的高度吗？（我不想硬编码像height:700px这样的东西）

我假设“占据浏览器提供的所有可用高度”意味着您希望divs占据100%的视口。代码中没有出现这种情况的原因是您只将
div
s的高度设置为100%。这意味着它们将占据其父元素
.container
的完整高度，但您尚未设置该元素的高度（或其父元素
主体的高度，或其父元素
html
的高度）。您需要设置所有这三个元素的高度

此外，我会在
body
上明确设置边距。如果没有，则在Firefox、Chrome和Edge中默认为
8px
，但在旧版本或其他浏览器中可能默认为其他数字。如果将边距设置为0，则对于
html
和
body
可以将高度设置为100%。如果希望
body
的边距为
8px
或其他一些非零数字，则需要在
html
和
body
的高度中说明这一点。（例如，
高度：计算（100%-8px）



测试
html，正文{
身高：100%；
}
身体{
保证金：0；
}
.集装箱{
显示器：flex；
弯曲方向：行；
身高：100%；
}
.左{
身高：100%；
显示：块；
宽度：50%；
背景颜色：绿色；
溢出y：滚动；
}
.对{
身高：100%；
背景色：红色；
显示：块；
宽度：50%；
溢出y：滚动；
}
正文























































































<














































<
正文
正文























































































<














































<
正文

看起来不错，干杯-但是有一件事，可以保留在两个div标签上滚动的正常滚动条吗？我不知道我是否理解。您希望在每个div上都有滚动条，在整个文档上都有滚动条？还是只希望在文档上有滚动条？在每个div上都有滚动条整个文档上的div和一个滚动条看起来是相互排斥的，不是吗？如果你可以用普通的滚动条滚动这两个div，那么为什么每个div也需要滚动条呢？我一定不明白你在找什么。请尽可能清楚、准确地解释。我不相信你能做到这一点他才智过人

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style>
        html, body {
            height: 100%;
        }
        body {
            margin: 0;
        }
        .container {
            display: flex;
            flex-direction: row;
            height: 100%;
        }
        .left {
            height: 100%;
            display: block;
            width: 50%;
            background-color: green;
            overflow-y: scroll;
        }
        .right {
            height: 100%;
            background-color: red;
            display: block;
            width: 50%;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            Text
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
        <div class="right">
            Text
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
    </div>
</body>
</html>