Question

我有一个标题菜单，我正在尝试使用CSS flex进行响应。

flex功能正常，但由于某种原因，项目的高度总是很大。

我正在使用的代码如下（边框只是用于显示元素高度）。

标题<div>的高度应缩小以匹配<p>元素的高度。有谁知道怎么做？

#header {
    background: #526272;
    width: 100%;
    max-width: 100vw;
    height:auto;
    position: fixed;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    align-items: center;
    color:white;
}

html {
    margin: 0;
    font-family: 'Raleway', sans-serif;
}

body {
    margin: 0;
}

#title {
    text-align: center;
    padding: 1em;
    vertical-align: middle;
    font-family: 'Oswald', sans-serif;
    font-size: 2em;
    border-right: solid red;
    width: auto;
    height: auto;
}

p {
    border-right: solid blue;
}

#menuBar {
    height: 100%;
    position: relative;
    text-align: center;
    display: block;
    padding: 1em;
    vertical-align: middle;
    
}

#social {
    height: auto;
    position: relative;
    text-align: center;
    display: block;
    padding: 1em;
    vertical-align: middle;
}

<body>
    <div id="header">
    <div id="title"><p>EXAMPLE SITE NAME</p></div>
    <div id="menuBar"><p>Menu</p>
    </div>
    <div id="social"><p>Socials</p></div>
  </div>
</body>

Answer 1

padding: 1em容器上有div.title。这在四个方面都创造了很多空间。

请改为尝试：

.title { padding: 0 1em; } /* padding only on the left and right */

此外，p元素带有浏览器设置的默认边距。进行此调整：

p { margin: 0; }

＆＃13;

#header {
  background: #526272;
  width: 100%;
  max-width: 100vw;
  height: auto;
  position: fixed;
  text-align: center;
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
  align-items: center;
  color: white;
}
html {
  margin: 0;
  font-family: 'Raleway', sans-serif;
}
body {
  margin: 0;
}
#title {
  text-align: center;
  padding: 0 1em;  /* adjusted */
  vertical-align: middle;
  font-family: 'Oswald', sans-serif;
  font-size: 2em;
  border-right: solid red;
  width: auto;
  height: auto;
}
p {
  margin: 0;  /* new */
  border-right: solid blue;
}
#menuBar {
  height: 100%;
  position: relative;
  text-align: center;
  display: block;
  padding: 1em;
  vertical-align: middle;
}
#social {
  height: auto;
  position: relative;
  text-align: center;
  display: block;
  padding: 1em;
  vertical-align: middle;
}

＆＃13;

<div id="header">
  <div id="title">
    <p>EXAMPLE SITE NAME</p>
  </div>
  <div id="menuBar">
    <p>Menu</p>
  </div>
  <div id="social">
    <p>Socials</p>
  </div>
</div>

＆＃13;

如何使div的高度尽可能缩小？

1 个答案: