Question

为什么如果我重新调整浏览器的大小，没有可用的向上和向下滚动来查看页面的完整内容？

这是我的Html：

<!DOCTYPE html>
<html>
<head><title>Faceboo Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head> 
<body>
    <div class="header">
        <div id="faceboo_logo" class="header">Faceboo
        </div>
        <div id="form1" class="header">Email or Phone?<br>
            <input type="email" placeholder="email"/>
        </div>
        <div id="form2" class="header">Password<br>
            <input type="Password" placeholder="Password"/><br>
            Forgot password?
        </div>
    </div>
    <input type="submit" class="submit1" value="login"/>
    <div class="body1">
        <div id="left_content1" class="body1">Faceboo helps you connect and share with the people in universities</div>
        <div id="left_content2" class="body1">Create Account</div>
        <div id="left_content3" class="body1">It’s free and always will be.</div>
        <div id="form3" class="body1">
            <input placeholder="First Name" type="text" id="namebox" />
            <input placeholder="Last Name" type="text" id="namebox" /><br>
            <input placeholder="Mobile Number or Email" type="text" id="emailbox" /><br>
            <input placeholder="Re-Enter Mobile Number or Email" type="text" id="namebox" /><br>
            <input placeholder="New password" type="text" id="namebox" /><br>
            Birthday<br>
            <input type="date" id="namebox"/><br>
            <input type="radio" id="sex" value="male"/>male
            <input type="radio" id="sex" value="male"/>female<br>
            By clicking Create Account, you agree to our Terms and that you have read our Data Policy, including our Cookie Use. You may receive SMS Notifications from Faceboo and can opt out at any time.<br><br>
            <input type="button" class="button2" value="SUBMIT">
            <hr>Create a Page for a celebrity, band or business.
        </div>
    </div>
    <div class="footer">
        <p>English(US) Tagalog Bisaya Español 日本語 한국어 中文(简体) العربية Português(Brasil) Français(France) Deutsch</p><br>
        <hr>
    </div>
</body>

</html>

这是我的CSS：

body{
    background-color: #fff;
    margin: 0;
    padding: 0;
}
.header{
    height: 100px;
    width: 100%;
    background-color: #3363ff;
    position: fixed;
}
.header #faceboo_logo{
    font-size: 50px;
    color: white;
    top: 25px;
    left: 25px;
    height: 50px;
    width: 200px;
}
.header #form1{
    top: 25px;
    left: 900px;
    height: 50px;
    width: 175px;
}
.header #form2{
    top:25px;
    left: 1080px;
    height: 50px;
    width: 175px;
}
.submit1{
    position: fixed;
    height: 50px
    width :50px;
    left: 1260px;
    top: 45px;
}
.body1{
    top:100px;
    background: #e9ebee;
    width: 100%;
    height: 500px;
    position: fixed;
}
#left_content1{
    font-size: 50px;
    left: 130px;
    width: 500px;
    top: 120px;
    height: 200px;
}

#left_content2{
    font-size: 50px;
    left: 850px;
    width: 320px;
    top: 120px;
    height: 50px;
}
#left_content3{
    font-size: 20px;
    left: 850px;
    top: 170px;
    height: 20px;
    width: 225px;
}

#form3{
    width: 350px;
    height: 22px;
    left: 850px;
    position: absolute;
}
.footer{
    top:600px;
    width: 900px;
    position: fixed;
    align-items: center;
    height: 200px;
    left: 20%;
    word-spacing: 10px;
}

顺便说一句。这只是为了练习我的html和css技能，我的选项用完了

Answer 1

使用CSS属性overflow：auto作为body标签，如

body{
overflow: auto;
}

删除位置：从你的body1类修复，然后尝试安排字段

.body1 {
background: #e9ebee none repeat scroll 0 0;
height: 500px;
position: fixed;
top: 100px;
width: 100%;}

Answer 2

这是因为position:fixed和body1类上的header属性，如果所有内容都已修复，那么可以滚动的内容。

.header{
    height: 100px;
    width: 100%;
    background-color: #3363ff;
    /*position: fixed;*/
}
.body1{
    /*top:100px;*/
    background: #e9ebee;
    width: 100%;
    height: 500px;
    /*position: fixed;*/
}

更新shuold你的CSS。

当我调整浏览器大小时，如何在我的网页上添加滚动条？

2 个答案: