Row complete the entire screen

Asked

Viewed 1,117 times

0

I’m trying to make the following layout:

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

Where header is a row individual 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 position: fixed; bottom: 0;

html5 bootstrap-3

2 answers

0


I think that 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>

0

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

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 on jsffidle

Reference: https://www.w3.org/TR/css3-values/#viewport-relative-lengths

Browser other questions tagged html5 bootstrap-3

You are not signed in. Login or sign up in order to post.