Исправлена ​​боковая панель внутри контейнера с содержанием жидкости

Question

Я пытаюсь добиться фиксированной левой боковой панели с содержанием жидкости в контейнере.

Я проверил ответы, которые говорят мне, чтобы я задал левую краю содержимого, которое я не хочу делать. Ближайший я мог бы получить через этот ответ:

A `position:fixed` sidebar whose width is set in percentage?

<div class="main-container"> 
    <div class="sidebar"> 
    <div class="sidebar-content-container"> 
     <div class="sidebar-content"> 
     <!-- Sidebar content here --> 
     </div> 
    </div> 
    </div> 
    <div id="content"> 
    <!-- Scrollable Content Here --> 
    </div> 
</div> 

Это CSS

.main-container { 
    height: 100vh; 
    max-width: 1366px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-top: 100px; 
    width: 100%; 
    position: relative; 

    .sidebar { 
    float: left; 
    width: 20%; 
    height: 100%; 
    position: relative; 

    .sidebar-content-container { 
     height: 100%; 
     position: fixed; 

     .sidebar-content { 
     display: block; 
     height: 100%; 
     width: 100%; 
     overflow: hidden; 
     } 
    } 
    } 

    #content { 
    height: 100%; 
    width: 80%; 
    display: inline-block; 
    float: right; 
    } 
} 

так, как я это сделать прямо сейчас, когда вы проверяете боковую панель, ширина вычисляется не в основном контейнере, а в остальной части окна просмотра. То, что я пытаюсь достичь, состоит в том, чтобы сохранить 20% -ный расчет в основном контейнере без установки фиксированной ширины.

Так желтая часть представляет собой проблему для меня. Как только я установил его исправленным, он не останется в родительском контейнере. Моя цель - после того, как я установил ее на исправление, она останется в красной части.

Я знаю, что я мог бы сделать что-то вроде ширины боковой панели. 100px-контент-margin-left 100px, но это не цель и не нравится javascript-альтернативам.

Мысли?

Спасибо!

Answer 1

Вы используете width:100% в этом div, а также дополнение, которое увеличивает его ширину от 100%, потому что добавление добавляет ширину. Таким образом, для придания отступы в пределах ширины 100% вы можете использовать свойство box-sizing:border-box, как показано ниже:

.main-container { 
    height: 100vh; 
    max-width: 1366px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-top: 100px; 
    width: 100%; 
    position: relative; 
    box-sizing:border-box; 
} 

Answer 2

Ну, я думаю, что это дело с неподвижными элементами. У них есть собственный ум. Как только элемент исправлен, он, похоже, не подчиняется правилу переполнения и размерности своих родительских контейнеров. Они берут свои размеры (если вы используете%) из ширины браузеров. Поэтому я думаю, что вам нужно сделать, чтобы фиксированный элемент был тем же размером, что и его непосредственный контейнер.

<div id="parent-box"> 
     <div id="fixed-elem"></div> 
    </div> 

    //css 
    #parent-box{ 
     position: relative; 
     width: 40%; 
     height: 100%; 
     float: left; 
     overflow: hidden; 
    } 

    #fixed-elem{ 
     position: fixed; 
     width: 40%;/*this is 40% of the browser width not the container*/ 
     height: 100%;/*this is 100% of the browser height*/ 
    }