Navbar в стороне левая высота 100%

se que muchos conocen SB Admin 2, estoy haciendo алгоритм подобное pero танго una duda подставляют lo референт poner el Navbar Комо а-ля izquierda que tome el 100% del alto de la pagina Комо lo hace ООН в стороне; tal cual esta en la imagen: introducir la descripción de la imagen aquí

Por одобряют подростка en cuenta que también quiero el Navbar en la parte превосходящий de la pagina.

    
    
    
        
        
        
        
        
        
        Login BoardRoster
    
    


      

      
            

Testing

Quiero hacerlo подобный o igual Администратор Сб 2, que el menú o navbar ubicado а-ля izquierda ocupe el 100% del alto de la pagina, y que en el centro o div.container se pueda poner el contenido de la web.

0
задан 27.02.2017, 18:09
3 ответа

Ты можешь использовать flex box для того, чего ты пробуешь достичь, имея в виду, что у aside и контейнера должна быть та же высота и как m¦-nimo 100 %, со следующим примером он подал бы тебя:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
     html,body {margin: 0;padding: 0}
    .menu-principal {width: 100%; height: 50px; background: red}
    .caja-flex {display:flex; min-height: calc(100vh - 50px)}
    .aside {width: 20%; background: #ccc}
    .container {width: auto; background: orange}
  </style>
</head>
<body>
  <nav class="menu-principal"></nav>
  <div class="caja-flex">
    <nav class="aside"></nav>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quae nobis voluptatum placeat nisi reiciendis impedit voluptates, minima quam cumque, sit aut dignissimos est et a, ad asperiores repellat ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quae nobis voluptatum placeat nisi reiciendis impedit voluptates, minima quam cumque, sit aut dignissimos est et a, ad asperiores repellat ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quae nobis voluptatum placeat nisi reiciendis impedit voluptates, minima quam cumque, sit aut dignissimos est et a, ad asperiores repellat ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quae nobis voluptatum placeat nisi reiciendis impedit voluptates, minima quam cumque, sit aut dignissimos est et a, ad asperiores repellat ab.</p>
   </div>
  </div>
</body>
</html>

могут видеть пример работая в codepen:

http://codepen.io/fantsal-academy/pen/BWoQpZ

1
ответ дан 24.11.2019, 10:52

если ты добавляешь следующее в твоем листе стилей:

html,body,.side-nav{
  height: 100%;
}
<nav style="width: 20%;" class="side-nav navbar navbar-default">

К Второму nav, который является тем левой стороны, ты добавляешь только класс side-nav asà - tomarÃ: высота всего pÃ: gina.

0
ответ дан 24.11.2019, 10:52
  • 1
    привет спасибо за ответ, оно функционирует, но меня не берут 100 % высоты страницы, я продолжаю созданный этикетки < br> чтобы пытаться и он показывает мне край nav, когда под scroll – ByGroxD 27.02.2017, 18:41

Меняет единицу процентного содержания ⠄… в view height. ( vh ) и tomarÃ: tamaño высоты окна

.side-nav{ height: 100vh; }

Эта единица функционирует с viewport и принимает меры окна или устройства.

Также то, что ты хочешь, состоит в том, чтобы он не пробежался pÃ: gina ты должен añadir свойство position:fixed для того, чтобы он остался, это Ваш posici¦n в течение scroll

0
ответ дан 24.11.2019, 10:52
  • 1
    Привет Я Отмечаю, желанный. Что ты не можешь печатать комментарии, но не из-за этого ты можешь печатать ответы низкого качества. Имей терпение до 50 rep. Приветствие – lois6b♦ 28.02.2017, 10:35

Теги

Похожие вопросы