如何让一个div的高度尽可能的缩小？答案

【问题标题】：How to make the height of a div shrink as much as possible?如何让一个div的高度尽可能的缩小？
【发布时间】：2017-07-03 04:27:59
【问题描述】：

我有一个标题菜单，我正在尝试使用 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>

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

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

试试这个：

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

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

p { margin: 0; }

#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;
}

<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>

【讨论】：