Row complete the entire screen

Navigation
0

I'm trying to do the following layout: 

-----------------------------------------------
Cabeçalho
-----------------------------------------------
                     |
                     |
                     |
                     |
    FORM             |        TEXTO
                     |
                     |
                     |
                     |
                     |
---------------------|-------------------------
Roapé
-----------------------------------------------

Where the header is an individual row and my form and texto is inside another row individual. And the footer is fixed: 

<body>
    <nav class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-xs-12">
                CABEÇALHO
            <div>
        </div>
        <div class="row">
            <div class="col-sm-5 col-md-5 col-xs-5">
                FORM
            <div>
            <div class="col-sm-7 col-md-7 col-xs-7">
                TEXTO
            <div>
        </div>
    </nav>
    <footer class="row">
            RODAPÉ
    </footer>
</body>

Doubt is like having the two middle columns with the total height between the header and the footer. Footer you a position: fixed; bottom: 0;

    
asked by anonymous 18.04.2016 / 19:55

2 answers

0

I think this solves your problem 

  <style>


.header{
    padding-bottom: 9px;
    border-bottom: 1px solid #eee;
    top: 0;
    position: absolute;
    width: 100%;
    left: 0;
    background-color: #ffcc00;
    height: 80px;
}

.conteudo{
    top: 80px !important;
    position: absolute !important;
    width: 100%;
    height: calc(100% - 160px);
    background-image: url("../img/background.png");
    background-repeat: repeat-x;
    background-position: right top;
    background-attachment: fixed;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  background-color: #000000;
}

 </style>
        <!-- Cabeçalho -->
        <div class="header">

        </div>

<!-- corpo -->
        <div class="conteudo container">
             <div class="row">
            <div class="col-sm-5 col-md-5 col-xs-5">
                FORM
            </div>
            <div class="col-sm-7 col-md-7 col-xs-7">
                TEXTO
            </div>
        </div>
        </div>
<!-- footer -->
        <footer class="footer container">

        </footer>
    
18.04.2016 / 20:10
0

You can use the percentage of the viewport vh to make it take up all the necessary space.

Example: 

 <div class="container-fluid">
  <header>HEADER</header>

  <section class="row">
    <section class="col-md-6 foo">FORM</section>
    <section class="col-md-6">TEXT</section>
  </section>

  <footer>FOOTER</footer>
</div>

.foo {
  border-right: thick dotted black;
  height:100vh; 
}

See the jsffidle

Reference: link

    
18.04.2016 / 20:17
Prefix (stackify) + Web Api + MVC + EF 5 is not monitoring querys Backup Application - Online via OneDrive or Local?