Я использую 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;
}
нижний колонтитул снаружи .row, поэтому он начнется, когда строка будет завершена – himanshu