Estoy tratando de crear un diseño de pantalla con CSS de arranque, pero como soy un principiante, estoy luchando demasiado. Tengo una fila que contiene dos columnas. Necesito que ambas columnas se extiendan hasta la parte inferior de la pantalla disponible y debería responder. En la segunda columna, necesito un div que siempre se coloca en su parte inferior. Por favor, vea la imagen adjunta. Cualquier ayuda es muy apreciada. ingrese la descripción de la imagen aquí

Esto es lo que hice:

<div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 bg-danger">
                left
                <ul>
                    <li ng-repeat="x in [1, 2, 3, 4, 5, 6, 7]">{{x}}</li>
                </ul>

            </div>
            <div class="col-md-6 col-sm-6 bg-info">
                right
                <div>
                    <ul>
                        <li ng-repeat="x in [1, 2, 3, 4, 5, 6, 7]"> content {{x}}</li>
                    </ul>
                </div>

                <div class="nav bg-warning">nav</div>
            </div>
        </div>
    </div>
0
Priyatam Roy 24 dic. 2016 a las 17:31

3 respuestas

La mejor respuesta

Para hacer que se extienda a la vista completa, les da a todos una altura del 100%

Otra opción es usar unidades de ventana gráfica vh en las columnas

html, body, .container, .row, .row > div {
  height: 100%;
}
.bg-info {
  position: relative;
}
.bg-info .nav {
  position: absolute;
  bottom: 0;
  width: calc(100% - 30px);   /* 2 * 15px padding */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
        <div class="row">
            <div class="col-xs-6 bg-danger">
                left
            </div>
            <div class="col-xs-6 bg-info">
                right
              
                <div class="nav bg-warning">nav</div>
            </div>
        </div>
    </div>
1
Ason 24 dic. 2016 a las 15:28

Mira esto.

.constant{
  position:absolute;
    bottom:0;
    right:0;
  width:100%;
  border: 2px solid #f60;
  height: 40px;
  }
.cover-viewport {
  height: 100vh;
  border: 2px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-6 cover-viewport">
  <!-- your content goes here-->
  </div>
  <div class="col-xs-6 cover-viewport">
  <!-- your content goes here-->
    <div class="constant"></div>
  </div>
  </div>
2
mohamad faramarzi 24 dic. 2016 a las 15:28

Espero que el siguiente código ayude:

.constant{
  position:absolute;
    bottom:0;
    right:0;
  }
<div class="row">
  <div class="col-md-6 col-sm-6">
  <!-- your content goes here-->
  </div>
  <div class="col-md-6 col-sm-6">
  <!-- your content goes here-->
    <div class="constant"></div>
  </div>
  </div>
0
Mohd. Merajuddin shaikh 24 dic. 2016 a las 14:39