为什么我的html页面可以在如此短的部分中垂直滚动？_Html_Css

为什么我的html页面可以在如此短的部分中垂直滚动？

html css

为什么我的html页面可以在如此短的部分中垂直滚动？,html,css,Html,Css,我是html移动编程的新手。由于一些奇怪的原因，我的网页表现得很不正常如下面的屏幕截图所示，我在页面的第一季度显示了一个垂直滚动条。我不明白为什么会显示出来我已经在谷歌上搜索了好几个小时（不知道到底要搜索什么），我不太确定这个问题是链接到我的html页面还是链接到它的css代码知道我做错了什么吗？非常感谢你的帮助 <!DOCTYPE html> <html> <head> <title>Domoos mobile </t

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


多莫斯移动电话
//全局变量
var AutoScript=false；
var ValueCheck=-1；
var ControleurUpdate=“”；
var恒温器手动更新=错误；








多莫斯移动电话
↑；06:25 ↓ 20:33
#tag_domoos_title{
字体系列：Arial；
字体大小：110%；
文本对齐：左对齐；
位置：绝对位置；
顶部：35px；
左：101px；
颜色：黑色；
z指数：10；
字号：900；
}
#日期{
字体系列：Arial；
字体大小：90%；
文本对齐：左对齐；
位置：绝对位置；
顶部：85px；
左：101px；
颜色：蓝色；
}
#时间{
字体系列：Arial；
字体大小：90%；
文本对齐：左对齐；
位置：绝对位置；
顶部：103px；
左：101px；
颜色：蓝色；
}
#日出日落{
字体系列：Arial；
字体大小：100%；
文本对齐：左对齐；
位置：绝对位置；
顶部：150px；
左：11px；
颜色：黑色；
}
#标记天气状况{
字体系列：Arial；
字体大小：90%；
文本对齐：左对齐；
位置：绝对位置；
顶部：130像素；
左：11px；
颜色：黑色；
}
#标签\天气\温度{
字体系列：Arial；
字体大小：90%；
文本对齐：左对齐；
位置：绝对位置；
顶部：148px；
左：11px；
颜色：黑色；
字号：900；
}
#当前天气状况{
字体系列：Arial；
字体大小：90%；
文本对齐：左对齐；
位置：绝对位置；
顶部：168px；
左：11px；
颜色：黑色；
}
#气象图标{
位置：相对位置；
}
#气象图标{
位置：绝对位置；
右：0；
顶部：80px；
}
#气象预报{
字体系列：Arial；
字体大小：100%；
浮动：左；
垫面：5px；
右边填充：0px；
垫底：0px；
左侧填充：10px；
高度：434px；
宽度：870px；
顶部：200px；
位置：绝对位置；
}
#气象预报第1天{
字体系列：Arial；
字号：80%；
文本对齐：左对齐；
位置：绝对位置；
顶部：260px；
左：11px；
颜色：黑色；
字号：600；
}
#气象预报第2天{
字体系列：Arial；
字号：80%；
文本对齐：左对齐；
位置：绝对位置；
顶部：330px；
左：11px；
颜色：黑色；
字号：600；
}
#气象预报第3天{
字体系列：Arial；
字号：80%；
文本对齐：左对齐；
位置：绝对位置；
顶部：400px；
左：11px；
颜色：黑色；
字号：600；
}
#气象预报温度第1天{
字体系列：Arial；
字号：80%；
文本对齐：左对齐；
位置：绝对位置；
顶部：260px；
左：220px；
颜色：黑色；
}
#气象预报温度第2天{
字体系列：Arial；
字号：80%；
文本对齐：左对齐；
位置：绝对位置；
顶部：330px；
左：220px；
颜色：黑色；
}
#气象预报温度第3天{
字体系列：Arial；
字号：80%；
文本对齐：左对齐；
位置：绝对位置；
顶部：400px；
左：220px；
颜色：黑色；
}
#气象预报条件第1天{
字体系列：Arial；
字号：80%；
文本对齐：左对齐；
位置：绝对位置；
顶部：280px；
左：11px；
颜色：黑色；
}
#气象预报状况第2天{
字体系列：Arial；
字号：80%；
文本对齐：左对齐；
位置：绝对位置；
顶部：350px；
左：11px；
颜色：黑色；
}
#气象预报状况第3天{
字体系列：Arial；
字号：80%；
文本对齐：左对齐；
位置：绝对位置；
顶部：420px；
左：11px；
颜色：黑色；
}
#domoos_标志{
位置：相对位置；
}
#domoos_标志img{
位置：绝对位置；
左：0；
顶部：10px；
}
#洛勒姆{
字体系列：Arial；
字体大小：100%；
文本对齐：左对齐；
位置：相对位置；
顶部：700px；
左：10px；
颜色：黑色；
}

添加更多内容，如果你是新手，也可以看看。它已经处理了所有的CSS，你会学到一些关于如何建立一个网站的东西。我想到的第一个例子是，您不断重申每个DIV使用的字体族是Arial，您只需将字体族添加到正文中，其他DIV就会继承您想要的字体

这可能是因为您告诉浏览器该div的高度是434倍

您应该始终将高度设置为“自动”，如下所示：

#meteo_forecast{
    height:auto;
}

你没有更多的内容，这就是为什么。只需添加一些内容。你的css样式在html文件中真的是这样吗？实际上，css是一个单独的文件，名为“mystyle_hamburger.css”@Johannes:你添加更多内容的确切意思是什么？如果我只是没有更多的内容可以添加。。。很抱歉这个愚蠢的问题，但我是个新手。谢谢你的宽容。问题是一切都是绝对定位的。绝对位置将图元从正常流量计算中删除。因此，车身标签的高度不正确。绝对定位应该是最后的手段。去掉绝对定位，使站点没有绝对定位。滚动条将消失。