Question

我是html移动编程的新手。由于一些奇怪的原因，我的网页表现得很好。

如下面的屏幕截图所示，我在页面的第一个季度显示了一个垂直滚动条。我不明白为什么会这样。

我用谷歌搜索了几个小时（不知道究竟要搜索什么），我不太确定问题是否与我的html页面或其链接的css代码相关联。

知道出了什么问题或者我在做错了什么？非常感谢你的帮助。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Domoos mobile </title> 
    <meta http-equiv="refresh" content="600">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
    <!--Using jQuery and jQuery UI for display effects--> 
    <script src="js/jquery-2.1.3.min.js"></script> 
    <script src="jquery-1.12.0/jquery-ui.min.js"></script> 
    <!--Using the hamburger menu display code--> 
    <script src="scripts/hamburger.js"></script> 
    <!--Using Media Queries, if the viewport is smaller than 700px use another stylesheet--> 
    <link rel="stylesheet" type="text/css" media="all" href="css/hamburger.css"/>
    <link rel="stylesheet" type="text/css" href="css/mystyle_hamburger.css" />
    <script type="text/javascript" src="scripts/date_time.js"></script>
    <script>
        // Global variables
        var AutoScript = false;
        var ValueCheck = -1;
        var ControleurUpdate = "";
        var ThermostatManualUpdate = false;
    </script>
</head> 
<body>
<!--This wrapping container is used to get the width of the whole content--> 
    <div id="container"> 
    <!--The Hamburger Button in the Header--> 
    <header>
        <div id="hamburger">
        <div></div>
        <div></div>
        <div></div>
        </div>
    </header> 
    <!--The mobile navigation Markup hidden via css--> 
    <nav> 
    <ul> 
    <!--<li><a href="#"><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">menuitem 1</a></li> -->
    <li><a href="#">menuitem 1</a></li>
    <li><a href="#">menuitem 2</a></li>
    <li><a href="#">menuitem 3</a></li>
    <li><a href="#">menuitem 4</a></li>
    <li><a href="#">menuitem 5</a></li>
    <li><a href="#">menuitem 6</a></li>
    </ul> 
    </nav> 
    <!--The Layer that will be layed over the content 
    so that the content is unclickable while menu is shown-->   
    <div id="contentLayer"></div> 
    <!--The content of the site--> 
    <div id="content">      
    <div class="tag_domoos_title">
        <p>Domoos mobile</p>
    </div>
        <div class="domoos_logo">
        <img src="assets/icons/logo_Domoos_lab.png" alt="" style="width:75px;height:54px;">
    </div>
    <div id="tag_sunrise_sunset">
        <p><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">&#8593; 06:25 &#8595; 20:33</p>
    </div>

    </div>
    </div>
</body> 
</html> 

#tag_domoos_title{
    font-family:Arial;
    font-size: 110%;
    text-align: left;
    position: absolute;
    top: 35px;
    left: 101px;
    color:black;
    z-index:10;
    font-weight: 900;
}

#date{
    font-family:Arial;
    font-size: 90%;
    text-align: left;
    position: absolute;
    top: 85px;
    left: 101px;
    color:blue;
}
#time{
    font-family:Arial;
    font-size: 90%;
    text-align: left;
    position: absolute;
    top: 103px;
    left: 101px;
    color:blue;
}

#tag_sunrise_sunset{
    font-family:Arial;
    font-size: 100%;
    text-align: left;
    position: absolute;
    top: 150px;
    left: 11px;
    color:black;
}

#tag_weather_condition{
    font-family:Arial;
    font-size: 90%;
    text-align: left;
    position: absolute;
    top: 130px;
    left: 11px;
    color:black;
}

#tag_weather_temperature{
    font-family:Arial;
    font-size: 90%;
    text-align: left;
    position: absolute;
    top: 148px;
    left: 11px;
    color:black;
    font-weight: 900;
}

#current_weather_conditions{
    font-family:Arial;
    font-size: 90%;
    text-align: left;
    position: absolute;
    top: 168px;
    left: 11px;
    color:black;
}

#meteo_icon {
  position: relative;
}

#meteo_icon img{
  position: absolute;
  right: 0;
  top: 80px;
}

#meteo_forecast{
    font-family:Arial;  
    font-size: 100%;
    float:left;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    height:434px;
    width:870px;
    top:200px;
    position: absolute;
}

#meteo_forecast_day1{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 260px;
    left: 11px;
    color:black;    
    font-weight: 600;
}

#meteo_forecast_day2{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 330px;
    left: 11px;
    color:black;    
    font-weight: 600;
}

#meteo_forecast_day3{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 400px;
    left: 11px;
    color:black;
    font-weight: 600;   
}

#meteo_forecast_temperature_day1{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 260px;
    left: 220px;
    color:black;
}

#meteo_forecast_temperature_day2{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 330px;
    left: 220px;
    color:black;
}

#meteo_forecast_temperature_day3{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 400px;
    left: 220px;
    color:black;
}

#meteo_forecast_condition_day1{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 280px;
    left: 11px;
    color:black;
}

#meteo_forecast_condition_day2{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 350px;
    left: 11px;
    color:black;
}

#meteo_forecast_condition_day3{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 420px;
    left: 11px;
    color:black;
}


#domoos_logo{
position: relative; 
}

#domoos_logo img{
  position: absolute;
  left: 0;
  top: 10px;
}

#lorem{
    font-family:Arial;
    font-size: 100%;
    text-align: left;
    position: relative;
    top: 700px;
    left: 10px;
    color:black;
}

Answer 1

这可能是因为你告诉浏览器这个div是434px高度！

你应该做的是将高度设置为＆＃34; auto＆＃34;像这样：

#meteo_forecast{
    height:auto;
}

Answer 2

添加更多内容，如果您是新手，请查看http://getbootstrap.com/。它有所有的CSS照顾，你将学习如何建立一个网站的一两件事。首先想到的例子是你一直重申每个DIV使用的字体系列是Arial，你可以简单地将字体系列添加到主体，其他div将继承你想要的字体。

为什么我的html页面可以在如此短的时间内垂直滚动？

2 个答案: