如何儘可能地縮小div的高度？

我有一個標題菜單，我試圖使用CSS flex進行響應。如何儘可能地縮小div的高度？

柔性功能工作正常，但項目的高度總是巨大的某些原因。

我正在使用的代碼如下（邊界就在那裏，以顯示元素的高度）。

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

來源

2017-02-14 ItsChris33

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

來源

2017-02-14 18:39:10

如何儘可能地縮小div的高度？

回答

相關問題