zjmttt 发表于 2019-5-18 11:54:48

html中设置overflow:auto

请问一下我将<body>的高度设置比<html>的高度大，然后把<html>中加上overflow:auto;为什么html没有完全包裹body.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
html{height:100px;border:10px black solid;background:gray;overflow:auto;}
body{margin:0; height:300px;border:10px green solid;background:blue;}
</style>
</head>
<body>
</body>
</html>

苏沫儿 发表于 2019-5-20 06:52:42

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鱼C论坛</title>
<style>
div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
}
div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}
div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}
div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<h2>overflow: scroll:</h2>
<div class="ex1">鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！</div>
<h2>overflow: hidden:</h2>
<div class="ex2">鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！</div>
<h2>overflow: auto:</h2>
<div class="ex3">鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！</div>
<h2>overflow: visible (默认):</h2>
<div class="ex4">鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！鱼C论坛 -- 学的不仅是技术，更是梦想！！！</div>
</body>
</html>

苏沫儿 发表于 2019-5-20 06:54:06

overflow 属性正确食用方法

zjmttt 发表于 2019-5-20 08:51:04

你好，正常使用我能明白的，就是不知道要怎么解释在<html>中加overflow的现象。
页: [1]
查看完整版本: html中设置overflow:auto