CSS: 2 div, бок о бок, правый div обрезается при изменении размера - PullRequest
Новая
       14

CSS: 2 div, бок о бок, правый div обрезается при изменении размера

0 голосов
/ 13 декабря 2018

Я пытаюсь создать базовую страницу CSS с двумя соседними элементами div, один для левой навигационной панели, один для содержимого.Я следил за ответом на этой странице:

CSS 2 Div Layout float

, и я могу добиться того, чтобы выглядел бок о бок, но когда я изменяю размер браузера,правильное содержание div становится отрезанным.

Браузер (Chrome) во всю ширину экрана: enter image description here

Размер браузера изменен:

enter image description here

Мой код (мы используем загрузчик): 

<div class="container-fluid bs-docs-container">

    <div class="row">

        <div style="width: 300px; float:left; height:100%; background:gray; margin:0; color:white;">This is the side bar</div>

        <div class="container" style="margin-left:320px; width: 90%;">
            <div style="display: inline-block; height:100%; background:black; color:white; width: 90%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Justo nec ultrices dui sapien eget. Aliquam sem fringilla ut morbi. Ut sem nulla pharetra diam sit amet. Massa eget egestas purus viverra accumsan in nisl. Nulla facilisi nullam vehicula ipsum a. Ridiculus mus mauris vitae ultricies leo integer malesuada. Risus sed vulputate odio ut enim blandit volutpat maecenas. Fusce id velit ut tortor pretium viverra.

Faucibus purus in massa tempor nec feugiat nisl. Amet commodo nulla facilisi nullam vehicula ipsum. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Pellentesque habitant morbi tristique senectus. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. Pulvinar etiam non quam lacus suspendisse faucibus. Est sit amet facilisis magna etiam. Adipiscing bibendum est ultricies integer quis auctor. Enim eu turpis egestas pretium aenean pharetra magna. Risus sed vulputate odio ut.

Sit amet commodo nulla facilisi nullam vehicula. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Venenatis urna cursus eget nunc. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Amet dictum sit amet justo donec enim diam vulputate ut. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Amet purus gravida quis blandit. Integer enim neque volutpat ac tincidunt vitae semper quis. Iaculis at erat pellentesque adipiscing commodo elit. Habitant morbi tristique senectus et netus et malesuada fames ac. Consequat nisl vel pretium lectus. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus.

Tellus mauris a diam maecenas sed enim. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Faucibus in ornare quam viverra orci sagittis eu. Volutpat diam ut venenatis tellus in. Turpis in eu mi bibendum neque egestas congue. Eget mi proin sed libero enim sed. Euismod quis viverra nibh cras. At in tellus integer feugiat scelerisque varius morbi enim. Sed viverra ipsum nunc aliquet bibendum enim. Viverra orci sagittis eu volutpat odio facilisis mauris. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Eget mauris pharetra et ultrices neque. Amet nulla facilisi morbi tempus. Libero volutpat sed cras ornare arcu dui. Diam ut venenatis tellus in.

Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Nibh mauris cursus mattis molestie. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Condimentum id venenatis a condimentum vitae sapien. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Magna sit amet purus gravida quis blandit turpis cursus. Bibendum ut tristique et egestas quis ipsum. Viverra nibh cras pulvinar mattis. Sed augue lacus viverra vitae congue eu consequat ac. Aliquam purus sit amet luctus. Habitant morbi tristique senectus et netus et malesuada fames. Tortor posuere ac ut consequat semper viverra nam libero justo.</div>

        </div>

    </div>

</div>

1 Ответ

0 голосов
/ 13 декабря 2018

Я заметил, что у вас есть margin-left: 320px на вашем втором div, который может выдвигать контент за рамку окна, поскольку на самом деле он больше ширины боковой панели.Если вы хотите, чтобы содержимое не совпадало с границей браузера, попробуйте добавить padding вместо

. Попробуйте использовать эту структуру, возможно, это вам поможет, в этом случае боковая панель имеет статическую ширину, а содержимое используетоставшееся место. 

.wrapper {
   display: flex;
   height: 100vh;
   align-items: stretch;
}

.sidebar {
   background-color: #EEEEEE;
   min-width: 300px;
}

.content {
   color: white;
   background-color: black;
   padding: 20px;
   margin-left: 20px;
}
<div class="wrapper">
   <div class="sidebar">
      
   </div>
   <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis quisquam minima molestiae ea cupiditate soluta dolorum. Veritatis odit architecto corrupti! Ducimus impedit enim animi veniam ratione dolor adipisci magni deserunt!
   </div>
</div>
...