2015-01-08 3 views
0

Я использую Zurb Foundation 5. Однако я не думаю, что этот вопрос связан с Фондом в любом случае. У меня есть внешний div с height: auto; Один из внутренних div Я пытаюсь сделать height: 100%, чтобы достичь нижнего колонтитула. Но это не работает. В настоящее время существует огромный разрыв между картой сайта div и нижним колонтитулом.внутренний div не нажав на 100%

Вы можете обратиться к этой ссылке: http://vani.valse.com.my/schone_lightings/productlisting.html

Мой HTML:

!doctype html> 
<html class="no-js" lang="en"> 

    <head> 

    </head> 

    <body> 
<!--header ends--> 

    <!--body starts--> 
    <div class="row"> 
     <div class="small-12 medium-12 large-12 columns"><!-- I want to make this height:100%;--> 
     <div class="container"> 
      menu 1 
     </div> 

     <div class="container"> 
      menu 2 
     </div> 

     <div class="container"> 
     content 
     </div>  

     <div class="container"> 
      site map 
     </div> 

    </div> 
    </div> 
    <!--body ends--> 

    <!--footer starts--> 
    <div class="small-12 medium-12 large-12 columns footer"> 
    Footer 

    </div> 
    <script src="js/vendor/jquery.js"></script> 
    <script src="js/foundation.min.js"></script> 
    <script> 
     $(document).foundation(); 
    </script> 
    </body> 
</html> 
<!--footer ends--> 

Мой CSS:

body 
{ 
    font-family: 'Open Sans', sans-serif; 
    background-image:url('../img/body-bg.jpg'); 
} 

.row 
{ 
    max-width: 85%; 
    height:100%; 

    background-color:#fff; 
    opacity:0.9; 
    filter:alpha(opacity=90) 
} 
.container 
{ 
    border:1 px solid #000; 
    width:85%; 
    margin:0 auto; 
    background-color:#ff0000; 

} 

div .container 
{ 
    border: 1px solid #000; 
    padding:10px; 
} 
.footer 
{ 
    background-color:#d2d1cf; 
    padding:10px; 
} 
+1

нижний колонтитул снаружи .row, поэтому он начнется, когда строка будет завершена – himanshu

ответ

0

Попробуйте применить вертикальную высоту вашего контейнера, который вы хотите быть на 100% высота

например

div { 
height: 100vh; 
} 
0

Чтобы установить ВЫСОТА Див до 100%, вам необходимо установить его высота контейнера до 100%

html, body { 
height: 100%; 
} 

fiddle

Теперь, если вы просто хотите, чтобы ваша сноска придерживаться нижней части на странице, я бы подумал об использовании абсолютной позиции на нем