I am trying to flush my footer to the bottom of the page. I have tried the official bootstrap method listed on http://getbootstrap.com/2.3.2/examples/sticky-footer.html which only seems to work on pages that have some amount of content. On pages with a short amount of content, it actually pushes the footer past the bottom of the page and creates scroll bars.
Sorry if the post if done badly. Ive never posted here before and it took me a while to figure it out.
Picture 1 shows the main body and there is no visible footer as it is past the bottom of the page.
<link rel="stylesheet" href="css/bootstrap.css" >
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="fonts/font-awesome.css">
<link rel="stylesheet" href="css/easy-responsive-tabs.css">
<!--JS-->
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/camera.js"></script>
<script>
$(document).ready(function(){
jQuery('.camera_wrap').camera();
});
</script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<div style='text-align:center'><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></div>
<![endif]-->
<!--[if lt IE 9]><script src="../docs-assets/js/ie8-responsive-file-warning.js"></script><! [endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrap">
<!--header-->
<header>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<h1 class="navbar-brand navbar-brand_"><span>Smile Hawthorn</span></h1>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 follow-box">
<div class="box2">
<ul>
<li><a href="#" target="new"><button type="button" class="btn btn-book btn-lg">
<span class="fa fa-calendar-header">BOOK ONLINE</button></a></li>
</ul>
<p class="tel"><span class="fa fa-phone-header"></span></p>
</div>
<div class="box1">
<p>Please click <strong>Book Online</strong> or <strong>Call</strong> our clinic for an appointment. </p>
</div>
</div>
</div>
<div class="menu-box">
<nav class="navbar navbar-default navbar-static-top tm_navbar clearfix" role="navigation">
<ul class="nav sf-menu clearfix">
<li>Home</li>
<li class="active sub-menu">About Us<span></span>
<ul class="submenu">
<li>Our Staff</li>
<li>Our Values</li>
<li>Our Technology</li>
</ul>
</li>
<li class="sub-menu">Services<span></span>
<ul class="submenu">
<li>Emergency</li>
<li>Fillings<span></span>
<ul class="submenu">
<li>Composite</li>
<li>CEREC</li>
<li>Amalgam</li>
</ul>
</li>
<li>Crowns/Caps</li>
<li>Root Canal</li>
<li>Whitening</li>
<li>Wisdom Tooth Removal</li>
<li>Veneers/Bonding</li>
<li>Orthodontics</li>
</ul>
</li>
<li>F.A.Q</li>
<li>Pricing</li>
<li>Location</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Content -->
<div class="global indent">
<div class="container">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-2 banner-box2">
<div>
<p class="title" align="center"><span>About Us</span></p><p> </p>
<p class="description" align="center">Our Staff</p>
<p class="description" align="center">Our Values</p>
<p class="description" align="center">Our Technology</p>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-10 banner-box2">
<div>
<p class="title">Lorem ipsum dolor sit amet <br>
conse ctetur adipisicing elit, sed <br>
do eiusmod tempor incididunt ut <br>
labore et dolore magn</p>
<p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--</div> <!-- end wrap-->
<div id="push"></div>-->
<div id="footer"><!--footer-->
<div class="container">
<div class="row clearfix">
<div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
<p class="text" align="left"><span class="fa fa-home-footer"></span><span class="footer_txt"> testing 123</span></p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
<p class="text" align="center"><span class="fa fa-phone-footer"></span><span class="footer_txt"> testing 123</span></p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
<div class="col-xs-10 col-sm-8 col-md-8 col-lg-10"> <!-- nested 2 coloumn in First Row -->
<p class="text" align="right"> <span class="fa fa-envelope-footer"></span><span class="footer_txt"><span style="color: #000;"> Email Us</span></span></p>
</div>
</div>
<hr>
<div class="row clearfix">
<div class="col-md-12 column"> <!-- second row -->
</div>
</div>
</div>
</div>
</div><!-- end footer Div -->
<script src="js/bootstrap.min.js"></script>
<script src="js/tm-scripts.js"></script>
</body>
</html>
i used the following CSS
body {
line-height: 1.42857;
font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
height: 100%;
background-color: #ffffff;
font-weight: bold;
}
html{
height: 100%;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -100px;
}
#push{ /* height must be the same as #footer height */
height: 100px;
}
#footer {
background-color: #FFFFFF;
padding-top: 40px;
padding-right: 0;
padding-left: 0;
background-position: top;
left: 0px;
bottom: 0px;
height: 100px;
background-image: url(../img/footer.jpg);
background-repeat: repeat;
}
The easiest way I know of to push down the footer in all cases is the following:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
footer {
height: 100px;
}
Demo here
Related
I have an issue with my bootstrap layout.
Basically, everything looks OK on larger screens but on smaller screens my footer overlaps the content or the content overlaps the footer!
This is the code I have: https://jsfiddle.net/xpvt214o/639029/
If you make the HTML part larger and smaller and look at the footer, you will see the issue.
This is my full code:
html,body,.col-md-12,.row {
height:100%;
}
.row > div {
height:100%;
}
.YOsidemenu{
padding:0;
font-weight:bold;
background-color: #ffc90e;
padding-top:10px;
max-width:200px;
}
#media only screen and (max-width:768px) {
.YOsidemenu{
display:none;
}
}
/* to make columns visible */
.row .col-sm-2 {
background-color:red;
}
.row .col-sm-10 {
background-color:green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="height:100%; background:#fff;width:100%;padding:0;" class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
Sidebar content
</div>
<div class="col-sm-10">
Body content
</div>
</div>
</div>
</div>
<!-- Footer -->
<section id="footer" style="text-align:left; !important">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left" style="text-align:left; !important">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Quick links</h5>
<ul class="list-unstyled quick-links">
<li>Home</li>
<li>Help</li>
<li>Sign-in</li>
<li>affiliate</li>
<li>Promote</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Support</h5>
<ul class="list-unstyled quick-links">
<li><i class="fa fa-envelope"></i>support#email.com</li>
<li><i class="fa fa-phone-square"></i>+44 7842227819</li>
<li><i class="fa fa-globe"></i>www.website.com</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
<p>this site a registered company. </p>
<p class="h6">© All right Reversed.<a class="text-green ml-2" href="https://www.website.com" target="_blank">website</a></p>
</div>
</hr>
</div>
</div>
</section>
<!-- ./Footer -->
Could someone please be kind enough and help me with this issue?
Thanks in advance.
Try removing height: 100% from the div. On mobile the container is 100% high, but because the columns get stacked and each column inherits the height, you have a parent with 100% height and two columns with each 100%, making it 200% of height.
Is this what you are looking for?
html,
body,
.col-md-12,
.row {
height: 100%;
}
.row>div {
height: 100%;
}
.YOsidemenu {
padding: 0;
font-weight: bold;
background-color: #ffc90e;
padding-top: 10px;
max-width: 200px;
}
#media only screen and (max-width:768px) {
.YOsidemenu {
display: none;
}
}
/* to make columns visible */
.row .col-sm-2 {
background-color: red;
}
.row .col-sm-10 {
background-color: green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="height:100%; background:#fff;width:100%;padding:0;" class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2 col-xs-2">
Sidebar content
</div>
<div class="col-sm-10 col-xs-10">
Body content
</div>
</div>
</div>
</div>
<!-- Footer -->
<section id="footer" style="text-align:left; !important">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left" style="text-align:left; !important">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Quick links</h5>
<ul class="list-unstyled quick-links">
<li>Home</li>
<li>Help</li>
<li>Sign-in</li>
<li>affiliate</li>
<li>Promote</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Support</h5>
<ul class="list-unstyled quick-links">
<li><i class="fa fa-envelope"></i>support#email.com</li>
<li><i class="fa fa-phone-square"></i>+44 7842227819</li>
<li><i class="fa fa-globe"></i>www.website.com</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
<p>this site a registered company. </p>
<p class="h6">© All right Reversed.<a class="text-green ml-2" href="https://www.website.com" target="_blank">website</a></p>
</div>
</hr>
</div>
</div>
</section>
<!-- ./Footer -->
I'm working on an app that uses Bootstrap 4. In addition, I'm using the material design framework. I need this app to take up the entire screen and to use the drawers that are part of the framework. I can successfully get the app to take up the entire screen by using a flexbox. However, I can't seem to get the drawer to take up all of the available height. You can see the issue in this Fiddle. The code in that Fiddle looks like this:
<div id="app" class="d-flex flex-column h-100">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="d-flex flex-column flex-grow">
<div class="h-100 flex-grow">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
<footer>
<p>Thank you for visiting!</p>
</footer>
</div>
How do I make the drawer take up the entire height between the nav and footer areas?
Thank you
One way is to make the element that wraps .bmd-layout-container a flex parent with flex-direction: column, then set the generated .bmd-layout-canvas class to flex-grow: 1.
$(document).ready(function () { $('body').bootstrapMaterialDesign(); });
body, html {
height: 100%;
}
.flex-grow {
flex: 1 0 auto;
}
.bmd-layout-canvas {
flex-grow: 1;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js"></script>
<div id="app" class="d-flex flex-column h-100">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="d-flex flex-column flex-grow">
<div class="h-100 flex-grow d-flex flex-column">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
<footer>
<p>Thank you for visiting!</p>
</footer>
</div>
Here's a fiddle - https://jsfiddle.net/n9c4Lbqa/
You can try setting the height in vh units. 1vh is equal to 1% of the window height (100vh = 100%). If you combine it with calc, you can set it to fill the window height minus the other elements.
.element {
height: calc(100vh - 50px);
}
Replace the 50px with whatever number is enough to clear the height / footer in your design.
Maybe not the prettiest way to do this, but works.
$(document).ready(function () { $('body').bootstrapMaterialDesign(); });
#app {
height: 100vh;
}
.flex-grow {
flex-grow: 1;
}
.fill {
height: 100%;
}
.test-wrap {
position: relative;
}
.test {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" />
<div id="app" class="d-flex flex-column fill">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="flex-grow p-r test-wrap">
<div class="h-100 flex-grow test">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
</div>
<footer>
<p>Thank you for visiting!</p>
</footer>
</div>
Here the flex way:
$(document).ready(function () { $('body').bootstrapMaterialDesign(); });
#app {
height: 100vh;
}
.flex-grow {
flex-grow: 1;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" />
<div id="app" class="d-flex flex-column">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="flex-grow d-flex test-wrap">
<div class="flex-grow test"><!-- removed h-100 -->
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
</div>
<footer>
<p>Thank you for visiting!</p>
</footer>
</div>
Something like this could work:
Fiddle: https://jsfiddle.net/aq9Laaew/105279/
CSS
body, html {
height: 100%;
margin: 0;
}
#app {
min-height: 100%;
}
.flex-grow {
flex: 1 0 auto;
}
.push {
height: 50px;
}
HTML
<div id="app" class="d-flex flex-column h-100">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="d-flex flex-column flex-grow push">
<div class="h-100 flex-grow">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
<footer class="flex-column h-100">
<p>Thank you for visiting!</p>
</footer>
</div>
i am trying to create a responsive web site but i am stuck in one place that the images with a background-imaged mask are not functioning properly. It works fine with larger screens but in medium and small screens my headline and some of the images are not seen with the "masked" background image. So could you tell me where i am making the mistake? Is it coding or the method that i am doing wrong?
The pictures that how display the screen are at the bottom of this page.You can see in large screen there is no problem but in other screens you cant see the headline and only half of the images are shown and the background doesnt stretch to cover all images and headline!!!
enter link description here This is the website.You can see better what the problem is.
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!--Menü scroll change color-->
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".navbar").css("background", "black");
}
else{
$(".navbar").css("background", "transparent");
}
})
})
</script>
<!--Menü scroll change color-->
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url('../img/fft99_mf5629880.Jpeg') no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family:Arial;
}
.navbar-brand{
font-family: Gabriola;
font-size:35px;
padding-top:10px;
}
.navbar-nav li a {
color:white !important;
font-family: 'Kristen ITC';
}
.fixed-top .navbar-nav li a:hover {
color: red !important;
}
.fixed-top .navbar-nav li a:focus {
color: red !important;
}
.fixed-top.scrolled {
background-color: #fff !important;
transition: background-color 200ms linear;
}
.fixed-top.scrolled .navbar-nav li a {
color:red !important;
}
.fixed-top.scrolled .navbar-nav li a:hover {
color: red !important;
}
.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.my-float{
margin-top:16px;
}
<!DOCTYPE html>
<html lang="tr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Avrupa Hayalleri - Avrupa'yı Görme Hayalleriniz Gerçek Olsun</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/ihover.css" >
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top ">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand red-text" href="#">BATU PARFÜM</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Anasayfa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bayan Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Erkek Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unisex Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
<!-- Links -->
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons ">
<li class="nav-item">
<!-- <a class="nav-link"><i class="fa fa-whatsapp fa-2x green-text "></i>0533 645 89 42</a> -->
<a class="nav-link" href="https://api.whatsapp.com/send?phone=905382392398"><i class="fa fa-whatsapp fa-2x green-text "> </i>0538 239 23 98 </a>
</li>
</ul>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div id="intro" class="view hm-black-strong container-fluid ">
<div class="container-fluid full-bg-img d-flex align-items-center justify-content-center ">
<div class="row container-fluid d-flex align-items-center justify-content-center">
<div class=" col-lg-8 col-md-8 col-sm-8 text-center ">
<hr class="hr-light ">
<!-- Heading -->
<h1 class=" font-bold mb-2 white-text">Kokunu Keşfet</h1>
<!-- Divider -->
<hr class="hr-light pt-2 ">
</div>
<!--Grid row-->
<div class="row col-lg-8 col-md-8 col-sm-8 container-fluid text-center mt-5">
<!-- Top to Bottom-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4 ">
<h2 class="mb-4 font-weight-bold white-text ">Unisex Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/perfume1.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4">
<h2 class="mb-4 font-weight-bold white-text">Bayan Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/f484004e6a670c4a5827535756317ba7a.jpg" class="img-fluid" alt="" style="border:3px solid white; " >
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4">
<h2 class="mb-4 font-weight-bold white-text">Erkek Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/e9feb436d5ed39c882d93ac8fc207e82a.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</div>
<!--/.Mask-->
</header>
<!--Main Navigation-->
</body>
</html>
small screen
medium screen
large screen
you can use media queries for smaller screens. Try this css for mobile phones:
header{
height: auto;
}
#intro{
padding: 0;
height: auto;
}
.full-bg-img{
position: relative;
}
This is my layout with no body
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Shop | E-Shopper</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/prettyPhoto.css" rel="stylesheet">
<link href="~/Content/price-range.css" rel="stylesheet">
<link href="~/Content/animate.css" rel="stylesheet">
<link href="~/Content/main.css" rel="stylesheet">
<link href="~/Content/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="~/Content/images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/Content/images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/Content/images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/Content/images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="~/Content/images/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<header id="header">
<!--header-->
<div class="header-middle">
<!--header-middle-->
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="logo pull-left">
<a href="#Url.Action("Index", "Home")">
<img src="~/Content/images/home/logo.png" alt="" />
</a>
</div>
</div>
<div class="col-sm-8">
<div class="shop-menu pull-right">
<ul class="nav navbar-nav">
#if (Session["Name"] != null)
{
<li style="margin-top:10px">
<p>
Welcome
#Session["UserName"].ToString()
</p>
</li>
<li><i class="fa fa-user"></i> Account</li>
<li>
<a href="#Url.Action("Logout", "Account")">
Logout
</a>
</li>
}
else
{
<li>
<a href="#Url.Action("Login", "Account")">
Login
</a>
</li>
}
</ul>
</div>
</div>
</div>
</div>
</div><!--/header-middle-->
<div class="header-bottom">
<!--header-bottom-->
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="mainmenu pull-left">
<ul class="nav navbar-nav collapse navbar-collapse">
<li>
<a href="#Url.Action("ListOfProductCategory", "ProductCategory")" class="elements">
<span>Manage Product categories</span>
</a>
</li>
<li>
<a href="#Url.Action("ListOfProducts", "Product")" class="elements">
<span>Manage Products</span>
</a>
</li>
<li>
<a href="#Url.Action("ShowUsers", "Home")" class="elements">
<span>Manage Customers</span>
</a>
</li>
<li>
<a href="#Url.Action("ViewOrders", "Home")" class="elements">
<span>View Orders</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
#RenderBody()
</div>
</div>
<footer id="footer">
<!--Footer-->
<div class="footer-bottom">
<div class="container">
<div class="row">
<p class="pull-left">Copyright © 2016 Shopping cart. All rights reserved.</p>
<p class="pull-right">Designed by <span><a target="_blank" href="http://www.atdrive.com">AtDrive</a></span></p>
</div>
</div>
</div>
</footer><!--/Footer-->
#RenderSection("scripts", required: false)
</section>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/price-range.js"></script>
<script src="~/Scripts/jquery.scrollUp.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.prettyPhoto.js"></script>
<script src="~/Scripts/main.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
This is my main.css having id footer which is used for the footer.
#footer {
background: #F0F0E9;
}
I dont know how to keep this footer at the bottom. it is getting at the middle when no body content is there.
Try this:
#footer {
position: absolute;
height: 50px;
width: 100%;
bottom: 0px;
border-top: solid 1px black;
}
use this Logic :
*{
box-sizing: border-box;
}
body, html{
height: 100%;
width: 100%;
margin: 0;
}
body{
display:flex;
flex-direction: column;
}
#container
{
margin: 0 auto;
width:80%;
background-color: white;
border: 0.2em solid black;
flex-shrink:0;
flex-grow:1;
display:flex;
}
#footer
{
margin: 0 auto;
width:100%;
text-align: center;
height:1.5em;
background-color: white;
border: 0.2em solid black;
flex-shrink:0;
}
.col {
height:90%;
flex-shrink:0;
flex-grow:1;
margin:0 2% 0 2%;
}
<div id="container">
<div class="col">
test column 1
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
</div>
<div class="col">
test column 2
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
</div>
</div>
<div id="footer">
test content
</div>
I have an app that I am trying to build that uses three-columns. Currently, I have the following code:
<html>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<style type="text/css">
.app {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.app-col {
height: 100%;
}
.fullwidth {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
<meta class="foundation-data-attribute-namespace">
<meta class="foundation-mq-xxlarge">
<meta class="foundation-mq-xlarge-only">
<meta class="foundation-mq-xlarge">
<meta class="foundation-mq-large-only">
<meta class="foundation-mq-large">
<meta class="foundation-mq-medium-only">
<meta class="foundation-mq-medium">
<meta class="foundation-mq-small-only">
<meta class="foundation-mq-small">
</head>
<body>
<div class="app">
<div class="row fullwidth" data-equalizer="">
<div style="width:33%; height:100%;">
<div class="row" data-equalizer="">
<div class="large-6 columns" style="background-color:#467EAF;">
<h3>Hello</h3>
<nav>
<ul style="list-style: none;">
<li><a href="/what/we-do" style="color:white;">
<h4><i class="icon-google-plus"></i>Welcome</h4></a>
</li>
<li><a href="/about" style="color:white;">
<h4><i class="icon-google-plus"></i>About Us</h4></a>
</li>
</ul>
</nav>
<ul class="inline-list text-center pull-bottom">
<li>Google Plus</li>
<li>LinkedIn</li>
<li>Email Us</li>
</ul>
</div>
<div class="large-6 columns" style="background-color:#829EBF;">
<h3>ABOUT</h3>
<nav>
<ul style="list-style: none;">
<li>Overview</li>
</ul>
</nav>
</div>
</div>
</div>
<div style="width:67%;">
Content
<ul class="inline-list text-center pull-bottom">
<li>©2015 Goes Here</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
</body></html>
My problem is, my columns are not taking up the full-height of the screen. I thought that was the purpose of the data-equalizer attribute. Unfortunately, it looks like I was wrong. What am I doing wrong?
I've been using vh units to get this to work:
div.full-height {
min-height:100vh;
}
For our particular project it meets our requirements, which you can check for your project at Can I Use
According to the foundation docs you're supposed to use data-equalizer on the parent and then data-equalizer-watch on all the children. http://foundation.zurb.com/docs/components/equalizer.html
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
</div>
And then don't forget to add $(document).foundation();
Edit
I misunderstood what you wanted initially. Basically you need to add several css rules of height: 100%; so that both the parents and children can expand to 100% of the screen height.
Here is an updated JSfiddle: http://jsfiddle.net/NateW/e4uqw4yq/