Почему мой элемент боковой панели с CSS «высота: 100%» на самом деле не распространяется на 100%?

У меня проблема с компоновкой страницы в css. У меня есть боковая панель, высота которой не 100%. Я хочу показать боковую панель в 100%, но я не могу. как увеличить высоту боковой панели до 100%. У меня есть .container-fluid с position: relative и .sidebar с position: relative.Почему мой элемент боковой панели с CSS «высота: 100%» на самом деле не распространяется на 100%?

это мой код:

body { 
 
    background-color: #e8e8e8; 
 
    font-family: 'Open Sans'; 
 
    height:100% 
 
} 
 
#sidebar { 
 
    padding-right: 0px; 
 
    padding-left: 0px; 
 
} 
 
.sidebar { 
 
    width: 220px; 
 
    position: absolute; 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    height: 100%; 
 
    z-index: 100; 
 
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); 
 
    background-color: #222A2D; 
 
} 
 
.container-fluid { 
 
    position: relative; 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
.main { 
 
    margin-left: 0; 
 
    min-height: 100%; 
 
    padding: 0; 
 
    margin-right: 15px; 
 
    color:red; 
 
    padding-left: 250px; 
 
}

<body id="mainbody"> 
 
    <div class="container-fluid"> 
 
     <header>Header</header> 
 
     
 
     <div class="sidebar" id="sidebar"> 
 
      <ul> 
 
       <li>menu1</li> 
 
       <li>menu2</li> 
 
       <li>menu3</li> 
 
      </ul> 
 
     </div> 
 
     
 
     <div class="main" id="main"> 
 
      Main content 
 
      <br> 
 
      Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      
 
      <br> 
 
     </div> 
 
     
 
     
 
    </div> 
 
</body>

источник

2015-08-17 Anonymous

Вы должны установить высоту тега HTML, ваш .container-жидкость и боковую панель также до 100%.

В принципе, все родительские теги должны быть установлены на 100% для решения проблемы. Однако, когда вокруг будет другой элемент, это будет выглядеть не так хорошо.

html { height:100%; } 
 

 
body { 
 
    background-color: #e8e8e8; 
 
    font-family: 'Open Sans'; 
 
    height:100% 
 
} 
 
#sidebar { 
 
    height:100%; 
 
    padding-right: 0px; 
 
    padding-left: 0px; 
 
} 
 
.sidebar { 
 
    width: 220px; 
 
    position: absolute; 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    height: 100%; 
 
    z-index: 100; 
 
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); 
 
    background-color: #222A2D; 
 
} 
 
.container-fluid { 
 
    height:100% 
 
    position: relative; 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
.main { 
 
    margin-left: 0; 
 
    min-height: 100%; 
 
    padding: 0; 
 
    margin-right: 15px; 
 
    color:red; 
 
    padding-left: 250px; 
 
}

<body id="mainbody"> 
 
    <div class="container-fluid"> 
 
     <header>Header</header> 
 
     
 
     <div class="sidebar" id="sidebar"> 
 
      <ul> 
 
       <li>menu1</li> 
 
       <li>menu2</li> 
 
       <li>menu3</li> 
 
      </ul> 
 
     </div> 
 
     
 
     <div class="main" id="main"> 
 
      Main content 
 
      <br> 
 
      Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      
 
      <br> 
 
     </div> 
 
     
 
     
 
    </div> 
 
</body>

источник

2015-08-17 04:31:14 rekire

Спасибо за помощь. но когда мой контент будет увеличиваться, моя боковая панель не может достигать 100%. см. http://jsfiddle.net/qwoy66ep/ –

Попробуйте CSS:

<style> 
    body { 
     background-color: #e8e8e8; 
     font-family: 'Open Sans'; 
     height: 100%; 
    } 

    #sidebar { 
     padding-right: 0px; 
     padding-left: 0px; 
    } 

    .sidebar { 
     width: 220px; 
     position: absolute; 
     padding-left: 0; 
     padding-right: 0; 
     height: 100%; 
     z-index: 100; 
     -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); 
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); 
     background-color: #222A2D; 
    } 

    .container-fluid { 
     height:100%; 
     position: absolute; 
     padding-right: 0; 
     padding-left: 0; 
     margin-right: auto; 
     margin-left: auto; 
    } 

    .main { 
     margin-left: 0; 
     min-height: 100%; 
     padding: 0; 
     margin-right: 15px; 
     color: red; 
     padding-left: 250px; 
    } 
</style>

источник

2015-08-17 04:45:54 manoj

Я добавляю только два свойства в **. контейнер-жидкость ** ** высота: 100%; ** ** позиция: абсолютная; ** – manoj

Спасибо за помощь , но когда мой контент будет увеличиваться, моя боковая панель не может достигать 100%. см. http://jsfiddle.net/qwoy66ep/ –

Вы можете использовать видового экрана единиц

В видовых единиц представляют собой новый набор блоков, предназначенных для решения проблем мы сталкиваемся сегодня. Один-пейджеры, сетки полной ширины, типографика и многие другие полагаются на размер окна просмотра. Раньше мы взломали эти проблемы, используя проценты, как упоминалось ранее, или JavaScript.

Этот новый комплект блоков состоит из четырех различных блоков. Два для каждой оси и минимальное и максимальное значения двух.

оч.сл.: 1/100th ширина окна просмотра

ВХ: 1/100 высота окна просмотра

Vmin: 1/100-ой самой маленькой

Vmax: 1/100-ой самой большой стороне

Так 1vh = 1% экрана.

Попробуйте это:

body { 
 
    background-color: #e8e8e8; 
 
    font-family: 'Open Sans'; 
 
    margin: 0; 
 
} 
 
#sidebar { 
 
    padding-right: 0px; 
 
    padding-left: 0px; 
 
} 
 
.sidebar { 
 
    width: 220px; 
 
    position: absolute; 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    height: calc(100vh - 22px); /*the height of the screen minus the header's height (right now 22px), if it changes you can change it in calc to make it more accurate*/ 
 
    z-index: 100; 
 
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); 
 
    background-color: #222A2D; 
 
} 
 
.container-fluid { 
 
    position: relative; 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
.main { 
 
    margin-left: 0; 
 
    min-height: 100%; 
 
    padding: 0; 
 
    margin-right: 15px; 
 
    color:red; 
 
    padding-left: 250px; 
 
}

<div class="container-fluid"> 
 
     <header>Header</header> 
 
     
 
     <div class="sidebar" id="sidebar"> 
 
      <ul> 
 
       <li>menu1</li> 
 
       <li>menu2</li> 
 
       <li>menu3</li> 
 
      </ul> 
 
     </div> 
 
     
 
     <div class="main" id="main"> 
 
      Main content 
 
      <br> 
 
      Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      
 
      <br> 
 
     </div> 
 
     
 
     
 
    </div>

Использование height: calc(100vh - 22px) просто, чтобы избежать ненужного вертикальной прокрутки, если вы только установить height: 100vh вы заметите.

источник

2015-08-17 05:00:20

Можете ли вы добавить ссылку img, чтобы увидеть, что именно вы хотите достичь ??? –

Я решил проблему с изменением боковой панели position: absolute; и left:0; и использовать html-тег с position: relative; и использовать min-height:100%; в любых разделах.

html { 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 

 
body { 
 
    background-color: #e8e8e8; 
 
    font-family: 'Open Sans'; 
 
    min-height: 100%; 
 
} 
 

 
#sidebar { 
 
    width: 220px; 
 
    background: #3a3633;  
 
    min-height: 100%; 
 
} 
 

 
.sidebar { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 904; 
 
    padding-top: 49px; 
 
} 
 

 
.container-fluid { 
 
    min-height:100%; 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.main { 
 
    margin-left: 220px; 
 

 
    
 
}

<body id="mainbody"> 
 
    <div class="container-fluid"> 
 
     <header>Header</header> 
 
     
 
     <div class="sidebar" id="sidebar"> 
 
      <ul> 
 
       <li>menu1</li> 
 
       <li>menu2</li> 
 
       <li>menu3</li> 
 
      </ul> 
 
     </div> 
 
     
 
     <div class="main" id="main"> 
 
      Main content 
 
      <br> 
 
      Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      <br>Main content 
 
      
 
      <br> 
 
     </div> 
 
     
 
     
 
    </div> 
 
</body>

источник

2015-08-18 04:39:13

Почему мой элемент боковой панели с CSS «высота: 100%» на самом деле не распространяется на 100%?

ответ

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