Question

嘿所有，谢谢花时间阅读，

我正在尝试创建我的在线portfilo。我希望导航栏从页面顶部有大约10％的边距。但是，当我尝试将垂直滚动条添加到浏览器中时。我觉得这与设置身体有关，html为100％。但是，我不确定为什么导航栏不会将该上边距应用于内容div而不是整个页面。内容div中的所有其他元素都可以正常工作。

----------------------------------------------- ------------------------------

以下是我的代码。

＆＃13;

@charset "utf-8";
/* CSS Document */

body, html{
	background-color: #000;
	width: 100%;
	height: 100%;
	margin: 0;
	padding:0;
	
}
#content{
	background-color: #FF0004;
	margin-left: 25%;
	margin-right: 25%;
	width: 50%;
	height: 100%;
	
}
#nav_bar{
	margin-top: 10%;
	background-color:#DCB017;
	width:100%;
	text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
	box-shadow: 0px 2px 10px #000;
}
#navigation{
	margin-left:5%;
	text-align: center;
	background-color:#292929;
	width:80%;
	color: #FFF;
	font-family: "BebasNeue", sans-serif;
	text-transform:uppercase;
	font-size:85%;
}
#navigation a{
	border-width:0px;
	color: #FFF;
	text-decoration:none;
}
#intro{
	margin-top: 5%;
	font-family: 'Fjalla One', sans-serif;
	color: #FFF;
}
.lower{
	font-size:240%;
}
.upper{
	font-size:300%;
}
#aboutme_tab{
	width:100%;
	background-color: #149840;
}
h1{
	
	color: #FFF;
	bottom:0;
	width: 100%;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>

<body>
	<div id = "content">
    	<div id = "test">
        </div>
        <div id = "nav_bar">
            <div id = "navigation">
                <table width="100%" height = "60" border="0">
          <tbody>
            <tr>
              <td width="25%"><a href="url">HOME</a></td>
              <td width="25%"><a href="url">ABOUT</a></td>
              <td width="25%"><a href="url">MY WORK</a></td>
              <td width="25%"><a href="url">CONTACT</a></td>
            </tr>
          </tbody>
        </table>
        
            </div>
          </div>
          <div id = "intro">
          	<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
    	  </div>
         
          	<h1>ABOUT ME</h1>
          
    
</div>
</body>
</html>

＆＃13;

这是我第一次在stackoverflow上发帖，很抱歉，如果我发布的内容不正确或不清楚。如果是的话请告诉我。再次感谢您的时间。

Answer 1

没关系我解决了它，我只是在页面顶部放置了一个高度为10％的div。不管怎样，谢谢。

Answer 2

如果您不想添加额外的div，可以执行以下操作：从nav_bar中删除边距，然后在#content div中添加10％的填充顶部，并与box-sizing结合使用：border-box你将不再获得滚动条。

#content{
    background-color: #FF0004;
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 10%;
}

Answer 3

我相信利润率的下降是你所看到的行为的原因。基本上，如果您的父元素中包含顶部边距的子元素没有顶部边框或任何顶部填充，则子元素的边距将应用于父元素。

请注意您在下面的代码段中看不到任何红色。

＆＃13;

body {
  background: #ccc;
  padding: 20px;
  margin: 0;
}

.parent {
  background: red;
}

.child {
  background: green;
  margin-top: 50px;
}

＆＃13;

<html>
  <body>
    <div class="parent">
      <div class="child">
        Hello!
      </div>
    </div>
  </body>
</html>

＆＃13;

我如何解决问题的方法是完全移除导航栏上的上边距，并在主体上添加10％的填充顶部。您可以使用box-sizing：border-box来使高度声明100％包含填充：

＆＃13;

@charset "utf-8";
/* CSS Document */

body, html{
	background-color: #000;
	width: 100%;
	height: 100%;
	margin: 0;
	padding:0;
}
body {
  padding-top: 10%;
  box-sizing: border-box;
}
#content{
	background-color: #FF0004;
	margin-left: 25%;
	margin-right: 25%;
	width: 50%;
	height: 100%;
	
}
#nav_bar{
	background-color:#DCB017;
	width:100%;
	text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
	box-shadow: 0px 2px 10px #000;
}
#navigation{
	margin-left:5%;
	text-align: center;
	background-color:#292929;
	width:80%;
	color: #FFF;
	font-family: "BebasNeue", sans-serif;
	text-transform:uppercase;
	font-size:85%;
}
#navigation a{
	border-width:0px;
	color: #FFF;
	text-decoration:none;
}
#intro{
	margin-top: 5%;
	font-family: 'Fjalla One', sans-serif;
	color: #FFF;
}
.lower{
	font-size:240%;
}
.upper{
	font-size:300%;
}
#aboutme_tab{
	width:100%;
	background-color: #149840;
}
h1{
	
	color: #FFF;
	bottom:0;
	width: 100%;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>

<body>
	<div id = "content">
    	<div id = "test">
        </div>
        <div id = "nav_bar">
            <div id = "navigation">
                <table width="100%" height = "60" border="0">
          <tbody>
            <tr>
              <td width="25%"><a href="url">HOME</a></td>
              <td width="25%"><a href="url">ABOUT</a></td>
              <td width="25%"><a href="url">MY WORK</a></td>
              <td width="25%"><a href="url">CONTACT</a></td>
            </tr>
          </tbody>
        </table>
        
            </div>
          </div>
          <div id = "intro">
          	<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
    	  </div>
         
          	<h1>ABOUT ME</h1>
          
    
</div>
</body>
</html>

＆＃13;

无法在没有创建垂直滚动条的情况下定位带有上边距的导航栏

----------------------------------------------- ------------------------------

3 个答案: