Я создаю макет для почтового ящика электронной почты. Данный проект состоит из заголовка и обложки в папке с полосой прокрутки справа. Входящие внутри должны иметь ту же ширину, что и заголовок. Поскольку полосы прокрутки браузера могут отличаться от ширины, поле ввода-справа может отличаться от поля заголовка справа, которое не имеет полосы прокрутки. Возможно ли улучшение без JS, которое выравнивает заголовок и входящие сообщения?
HTML
<div class="header"> HEADER</div>
<div class="inbox_wrap">
<div class="inbox">
Item<br />
Item<br />...
</div>
</div>
CSS
.header{
height: 50px;
background: grey;
margin-top: 20px;
margin-right: 40px;
margin-left: 40px;
color: white;
}
.inbox_wrap{
background: rgba(111,111,111,0.2);
left: 40px;
right: 0;
top: 80px;
bottom: 0;
position: absolute;
overflow-y: scroll;
}
.inbox{
background: rgb(100,200,240);
margin-right: 25px;
}
Я сожалею, что понял ваш вопрос, но если вы хотите выровнять заголовок и папку "Входящие", перейдите по ссылке, где я выровнял оба div.
<div class="header"> HEADER</div>
<div class="inbox_wrap">
<div class="inbox">
Item<br />
Item<br />...
</div>
</div>
вы можете "включить" ширину полосы прокрутки, используя вложенную папку для прокрутки. Вот пример:
html, body
{
height:100%;
overflow: hidden;
}
body{
margin: 0;
padding: 0;
}
.header{
height: 50px;
background: grey;
margin-top: 20px;
margin-right: 40px;
margin-left: 40px;
color: white;
}
.inbox_wrap{
background: rgba(111,111,111,0.2);
left: 40px;
right: 40px;
top: 80px;
bottom:0;
bottom: 0;
position: absolute;
overflow-y: auto;
}
.inbox{
background: rgb(100,200,240);
}