Question

所以，我开始创建一个网页（注意：我的第一个），在我完成主页后，我注意到它不会滚动。我试图解决它，在这个网站上找到一些答案，但没有成功。这是代码：

<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="style.css">
<div "page">
    <head>
        <title>Make-A-Wish Romania</title>
        <div id="social" style="position: fixed; top: 0px; left: 10%; width: 100%;">
        <ul>
            <li>SOCIAL</li>
            <li> <a href="https://www.facebook.com/" target="_blank"><img src="fb.png"><a href="https://www.youtube.com/" target="_blank"><img src="yt.gif"></a></li>
        </ul>
        </div>



        <div id="toolbarbottom" class="toolbar" style="position: fixed; top: 70px; left: 0px; width: 100%;">
        <ul id="buttons">
        <li></li>

        </ul>
        </div>

        <div id="maw" style="position: fixed; top: 80px; width: 100%;">
        <a href="#"><img src="maw1.png" style="height:100px;">
        </div>

        <div id="meniu" class="toolbar" style="position: fixed; top: 110px; left: 56%; width: 100%;">
            <ul>
                <li><a href="#">DORINTE</li>
                <li><a href="#">AJUTA</li>
                <li><a href="#">DESPRE NOI</li>
            </ul>
        </div>

        <div id="don" style="position: fixed; top: 100px; left: 90%; width: 100%;">
        <p><a href="#">DONATI</p>
        </div>

    </head>
    <body bgcolor="#e3e7ed">
    <div id="img1" style="position: fixed; top: 200px; left: 0px; width: 100%;">
        <img src="bg.png">
    </div>
    <div id="img2" style="position: fixed; top: 200px;  left: 10%; width:100%;">
        <img src="buna.jpg">
    </div>  

    <div id="mawro" style="position: fixed; top: 820px; right: 4%;">
        <img src="mawro.png">
    </div>
    <div id="loc" style="position: fixed; top: 850px; left: 4%;">
        <img src="location.png">
    </div>
    <div id="loctxt" style="position: fixed; top: 850px; left: 9%;">
        <p>Piata Presei nr 1, etaj 6, camerele 16-17, sector 1,Bucuresti, Romania</p>
    </div>

    <div id="phone" style="position: fixed; top: 850px; left: 39%;">
        <img src="phone.png">
    </div>
    <div id="phonetxt" style="position: fixed; top: 850px; left: 42%;">
        <p>+40 746 192 515</p>
    </div>

    <div id="mail" style="position: fixed; top: 850px; left: 53%;">
        <img src="mail.png">
    </div>
    <div id="mailtxt" style="position: fixed; top: 850px; left: 57%;">
        <p>office@makeawish.org.ro</p>
    </div>

    </body>
</div>

</html>

和CSS：

@font-face {
font-family: font1;
src: url(font2.ttf);
}

#toolbarbottom ul{
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
width: 100%;
background-color: #b3c3d6;
top: 300px;
}
#toolbarbottom li {
float: left;
width: 14%;
height: 150px;
border-top: 15px;
text-align: center;
line-height: 44px;
text-decoration: none;
}

#toolbarbottom li a{
display: block;
height: 1px;
text-decoration: none;
color: #2a2f35;
font-family: font1;
}
#toolbarbottom li span{
position: absolute;
clip: rect(20px, 20px, 20px, 20px);
clip: rect(20px, 20px, 20px, 20px);
}

#img1 img{
width: 100%;
cursor: default;
}
#img2 img{
width: 77.2%;
cursor: default;
}
#social ul{
list-style: none;
}
#social li{
float: left;
font-size: 30px;
font-family: font1;
width: 110px;
color: #777777;
font-weight: bold;
}
 #social img{
height: 35px;
width: 35px;
}
#meniu ul{
list-style: none;
}
#meniu li{
float: left;
width: 10%;
text-decoration: none;
font-family: font1;
font-size: 24px;
}
#meniu li a{
text-decoration: none;
color: #4c4c4c;
}
#maw img{
width: 400px;
}
#don p{
float: left;
text-decoration: none;
font-family: font1;
font-size: 24px;
width: 120px;
text-align: center;


}
#don  p a{
text-decoration: none;
font-family: font1;
font-size: 24px;
color: #4c4c4c;
display: block;
background-color: #bf5d5d;
border-radius: 25px;
transition-duration: 0.5s;
}
#don p a:hover{
text-decoration: none;
transition-duration: 0.5s;
background-color: #e28a8a;
}

#mawro img{
width: 320px;
}

#loc img{
width: 12%;
}

#loctxt p{
font-family: font1;
font-size: 17px;
color: #7a7a7a;
}
#loctxt p a{
color: #7a7a7a;
text-decoration: none;
}

#phone img{
width: 10%;
}
#phonetxt p{
font-family: font1;
font-size: 17px;
color: #7a7a7a;
}
#phonetxt p a{
color: #7a7a7a;
text-decoration: none;
}
#mail img{
width: 10%;
}
#mailtxt p{
color: #7a7a7a;
text-decoration: none;
font-family: font1;
font-size: 17px;
}
#mailtxt p a{
color: #7a7a7a;
text-decoration: none;
}
html {
overflow-y: scroll;
}
body {
position: absolute;
}

Answer 1

页面不滚动，因为html中的几乎所有元素都有：

style="position: fixed; top: 850px; left: 4%;"

您还应该从css文件的末尾删除body {position: absolute}。

如果要滚动页面，则应将其删除。此外，您的代码中存在许多错误，文档结构不正确。页面内部不能包含任何元素，这应该包含在元素内部。查看w3schools以便更好地理解： http://www.w3schools.com/html/html_intro.asp

在这里你可以找到很多很好的代码示例： http://web-snippets.com/ 你也可以在那里玩代码。所有样本均可编辑。

祝你好运！

我的页面没有滚动

1 个答案: