屏幕左侧的额外空白区域

【问题标题】：Extra White Space On the Left Side of the Screen屏幕左侧的额外空白区域
【发布时间】：2015-05-15 04:51:25
【问题描述】：

即使我已经删除了lower_content div的填充和边距，我仍然在屏幕左侧看到这个薄薄的空白区域......就像有一个我无法在任何地方找到的不可见边距.我的内容可以很好地到达屏幕的右侧，但不能到达左侧。

请帮我找出问题...

HTML：

<!DOCTYPE html>
<html lang = "en">
<head>
    <title>My name here</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="styleForFullPage.css" type="text/css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

    <div class="side_banner">
        <nav>

            <ul>
                <li><a href="#" >HOME</a></li>
                <li><a href="about_me_FP.html" >ABOUT ME</a></li>
                <li><a href="portfolio_FP.html" >PORTFOLIO</a></li>
                <li><a href="contact_me_FP.html" >CONTACT</a></li>
            </ul>
            <hr/>
        </nav>
    </div>

    <div class="name_div">
        <h1>My name here</h1>
    </div>

    <div class="lower_content">
        <p>LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
            <br/>
    LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        <br/>
            LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        </p>
    </div>  


</html>

CSS：

@font-face {
        font-family: comfortaa;
        src: url(Comfortaa-Regular.ttf);
    }


html { 
  background: url(meAndTheOcean.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0;
  padding: 0;
}



.side_banner{
    /*font-family: Tahoma, Verdana, Segoe, sans-serif;*/
    font-family: comfortaa;

    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.3999996185303px;

    background-color:transparent;


    float:left;
    height:100%;
    width: 150px;
    margin: 0% 2% 2% 0%;
}


.side_banner nav ul{
    width: 100%;
    list-style: none;
    list-style-type:none;
    padding: 0;


}



.side_banner nav ul li{

}
.side_banner nav a:link, .side_banner nav a:visited{
    color: white;
    display:block;
    text-decoration: none;
    /*padding: 10px 25px;*/
    padding: 10px;
}

.side_banner nav a:hover, .side_banner nav a:active, .side_banner nav .active a:link,
.side_banner nav .active a:visited{
    text-decoration: none;
    background-color: orange;
    /*background-color: 1C6BA0;*/
    text-shadow: none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

.main_content{
    float: left;
    margin: 1% 2% 2% 2% ;
    width: 70%;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color:white;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

.name_div{
    font-family:comfortaa;
    color: white;

    text-align: center;

    width: 300px;
    height:200px;

    position:absolute;
    left:50%;
    top:50%;
    margin:-110px 0 0 -150px;
}

.lower_content{
    overflow: auto;
    position: absolute;
    top: 650px;
    width:100%;

    background-color:white;

    overflow-x:hidden;


    color:black;
    font-size:20;

    margin: 0% 0% 0% 0% ;
    padding: 0;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

【问题讨论】：

  • 也将html 元素样式应用于body 元素。喜欢html, body { }

标签： html css


【解决方案1】：

&lt;body&gt; 默认有自己的margin 或8px。

简单定义规则

body {
  margin: 0;
}

或者，如 cmets 中所述，对 body 和 html 使用集体规则：

html, body {
  …
}

【讨论】：

  • 谢谢，这解决了问题！现在有什么方法可以防止它水平滚动吗？由于某种原因，并非所有内容都适合一个完整的窗口，并且页面水平滚动
  • 我发现了问题...当我将内容宽度设置为较低时：100%...这是为什么呢？
  • @mnot 我不知道水平滚动；我无法重现它......
【解决方案2】：

我已经清理了你的鳕鱼，请检查一下它可能对你有帮助

@font-face {
        font-family: comfortaa;
        src: url(Comfortaa-Regular.ttf);
    }
body { 
  background: #6fa5ae; 
  margin: 0;
  padding: 0;
}
.side_banner{
    font-family: comfortaa;
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26px;
    float:left;
    width: 150px;
    margin: 0% 2% 2% 0%;
}
.side_banner nav ul{
    width: 100%;
    list-style: none;
    padding: 0;
}
.side_banner nav a:link, .side_banner nav a:visited{
    color: white;
    display:block;
    text-decoration: none;
    padding: 10px;
}
.side_banner nav a:hover, .side_banner nav a:active, .side_banner nav .active a:link,
.side_banner nav .active a:visited{
    text-decoration: none;
    background-color: orange;
    text-shadow: none;
    border-radius:5px;
}
.main_content{
    float: left;
    margin: 1% 2% 2% 2% ;
    width: 70%;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color:white;
    border-radius:5px;
}

.name_div{
    font-family:comfortaa;
    color: white;
    text-align: center;
    width: 300px;
    height:200px;
    position:relative;
    margin:0;
    float: right;
}

.lower_content{
    overflow: auto;
    position: relative;
    float: left;
    width:92%;
    margin: 2%;
    background-color:white;
    overflow-x:hidden;
    color:black;
    font-size:20;
    padding: 2%;
    border-radius:5px;
}
    <div class="side_banner">
        <nav>

            <ul>
                <li><a href="#" >HOME</a></li>
                <li><a href="about_me_FP.html" >ABOUT ME</a></li>
                <li><a href="portfolio_FP.html" >PORTFOLIO</a></li>
                <li><a href="contact_me_FP.html" >CONTACT</a></li>
            </ul>
            <hr/>
        </nav>
    </div>

    <div class="name_div">
        <h1>My name here</h1>
    </div>

    <div class="lower_content">
        <p>LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
            <br/>
    LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        <br/>
            LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        </p>
    </div>

【讨论】：

    【解决方案3】：

    当您将 ul 的 list-style 设置为 none 时，为项目标记保留的左边距仍然存在。你只需要覆盖ul的左边距。

    【讨论】：

      【解决方案4】：

      请看这里。 

      @font-face {
        font-family: comfortaa;
        src: url(Comfortaa-Regular.ttf);
    }
body{
margin:0;
  padding:0;
}

html { 
  background: url(meAndTheOcean.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0;
  padding: 0;
}



.side_banner{
    /*font-family: Tahoma, Verdana, Segoe, sans-serif;*/
    font-family: comfortaa;

    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.3999996185303px;

    background-color:transparent;


    float:left;
    height:100%;
    width: 150px;
    margin: 0% 2% 2% 0%;
}


.side_banner nav ul{
    width: 100%;
    list-style: none;
    list-style-type:none;
    padding: 0;
    margin:0;


}



.side_banner nav ul li{
background:#000;
}
.side_banner nav a:link, .side_banner nav a:visited{
    color: white;
    display:block;
    text-decoration: none;
    /*padding: 10px 25px;*/
    padding: 10px;
}

.side_banner nav a:hover, .side_banner nav a:active, .side_banner nav .active a:link,
.side_banner nav .active a:visited{
    text-decoration: none;
    background-color: orange;
    /*background-color: 1C6BA0;*/
    text-shadow: none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

.main_content{
    float: left;
    margin: 1% 2% 2% 2% ;
    width: 70%;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color:white;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

.name_div{
    font-family:comfortaa;
    color: white;

    text-align: center;

    width: 300px;
    height:200px;

    position:absolute;
    left:50%;
    top:50%;
    margin:-110px 0 0 -150px;
}

.lower_content{
    overflow: auto;
    position: absolute;
    top: 650px;
    width:100%;

    background-color:white;

    overflow-x:hidden;


    color:black;
    font-size:20;

    margin: 0% 0% 0% 0% ;
    padding: 0;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}
      <div class="side_banner">
        <nav>

            <ul>
                <li><a href="#" >HOME</a></li>
                <li><a href="about_me_FP.html" >ABOUT ME</a></li>
                <li><a href="portfolio_FP.html" >PORTFOLIO</a></li>
                <li><a href="contact_me_FP.html" >CONTACT</a></li>
            </ul>
            <hr/>
        </nav>
    </div>

    <div class="name_div">
        <h1>My name here</h1>
    </div>

    <div class="lower_content">
        <p>LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
            <br/>
    LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        <br/>
            LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        </p>
    </div>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2019-11-17
        • 2018-08-07
        • 1970-01-01
        • 1970-01-01
        • 2020-11-17
        • 2015-11-09
        • 2019-08-23
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode