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

why if i re-size down my browser, there's no available scroll up and down to view the full content of the page?

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

here is my Html:

这是我的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>

Here is my CSS:

这是我的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;
}

btw. this is just for practicing my html and css skill, I'm running out of options

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

2 个解决方案

#1

This is happening because of position:fixed property on body1 and header classes, if everything is fixed then what will be scrollable.

这是因为position：body1和header类的固定属性，如果一切都已修复，那么可滚动的内容。

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

Update shuold your css.

更新shuold你的CSS。

#2

Use CSS property overflow: auto for body tag like

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

body{
overflow: auto;
}

remove position: fixed from your body1 class and then try to arrange fields

删除位置：从body1类中修复，然后尝试排列字段

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

#1