Как сделать высоту div максимально усеченной?

У меня есть меню заголовка, которое я пытаюсь сделать отзывчивым с помощью CSS flex.Как сделать высоту div максимально усеченной?

Функциональность 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>

источник

2017-02-14 ItsChris33

Вы padding: 1em на div.title контейнере. Это создает много места на всех четырех сторонах.

Попробуйте вместо этого:

.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 максимально усеченной?

ответ

Смежные вопросы