Question

我有一个小问题，我可以解决，但它让我很烦，我不明白。也许你可以帮忙。我有一个带有导航栏的标题，里面浮动到右边。现在，当我向nav添加margin-top并将其设置为等于10％时，它不会相对于父项高度进行调整。相反，它显示在页面的更下方。继承我的代码：

* {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
}
header {
  background-color: yellow;
  height: 10%;
  width: 100%;
  overflow: hidden;
}
header img {
  float: left;
}
nav {
  float: right;
  background-color: grey;
  width: 30%;
  text-align: center;
  margin-top: 1%;
}
nav ul {
  list-style-type: none;
}
nav ul li {
  display: inline;
}

<header>
  <img src="" alt="Reece Barrett's" height="" width="" />

  <nav>
    <ul>
      <li><a href="#">About Me</a>
      </li>
      <!--
                 -->
      <li><a href="#">Porfolio</a>
      </li>
      <!--
                 -->
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</header>

Answer 1

如果您希望header为自动高度，请使用min-height代替使用高度，同时删除overflow:hidden，否则会隐藏溢出的内容。

header {
  background-color: yellow;
  min-height: 10%;
  width: 100%;
  overflow: hidden;
}

了解更多信息https://developer.mozilla.org/en/docs/Web/CSS/min-height

Answer 2

您可以使用min-height: 10%

继承人：https://jsfiddle.net/a4sg5b72/

Answer 3

我会使用绝对定位＆amp;相对的。 Codepen：http://codepen.io/rezasan/pen/YGmVGo

    header {
      background-color: yellow;
      height: 10%;
      width: 100%;
      position:relative;
    }
    header img {
      position:absolute;
      left:0;
      top:50%;
      transform:translateY(-50%);
    }
    nav {
      background-color: grey;
      width: 30%;
      text-align: center;
      position:absolute;
      right:0;
      top:50%;
      transform:translateY(-50%);
    }

Answer 4

你可以试试这个：

＆＃13;

*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 1000px;
}
header{
background-color: yellow;
height: 10%;
width: 100%;
}
header img{
float: left;
}
nav{
float: right;
background-color: grey;
width: 30%;
text-align: center;
margin-top: 10%;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline;
}

＆＃13;

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page</title>
</head>
<body>
    <header>
        <img src="" alt="Reece Barrett's" height="" width="" />
        <nav>
            <ul>
                <li><a href="#">About Me</a></li>
                 <li><a href="#">Porfolio</a></li>
                 <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

＆＃13;

这是因为溢出：隐藏 头

浮动元素和上边距

4 个答案: