Dynamic height for html content
Question
I am working on a web page with basic template.
It has a header, top navigation, side navigation, main content area and footer.
I created a similar design in jsfiddle, though it looks different from what I see in my html. Here is the link: https://jsfiddle.net/f4sc9sy7/8/
Here is my code:
$(document).ready(function(){ $(".top-menu").click(function(e){ // set selectd menu as active $(".top-menu").removeClass("active"); $(this).addClass("active"); }); // main view area height var footerHeight = $("footer").outerHeight(); var headerHeight = $("header").outerHeight(); var menuHeight = $("#top-nav").outerHeight(); var htmlHeight = $("html").outerHeight(); var mainWindowHeight = htmlHeight - (footerHeight + headerHeight + menuHeight); //how to remove this hard coding? $("#main-layout").outerHeight(mainWindowHeight-41); });
html { background: #F5F4EF; color: #000305; margin: 0; padding: 0; width: auto; } #side-nav { float: left; width: 20%; height: inherit; background: lavender; } #main-content { float: right; width: 80%; height: inherit; background: lightgreen; } header, footer { background-color: black; color: #F5F4EF; width: auto; text-align: center; margin: 0; height: 5%; padding: 0; } #top-nav { width: auto; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: #4CAF50; color: white; }
<html> <head> <title> Test HomePage </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> </head> <header> <h1> Header </h1> </header> <div id="top-nav" class="topnav"> <a class="top-menu" href="#home">Home</a> <a class="top-menu" href="#news">News</a> <a class="top-menu" href="#contact">Contact</a> <a class="top-menu" href="#about">About</a> </div> <div id="main-layout"> <div id="side-nav"> Side Navigation </div> <div id="main-content"> content </div> </div> <footer> <h1>Footer </h1> </footer>
There are two issues:
I am trying to set height of main content div dynamically. I wish to use javascript and relative attributes to set the height of page. Due to some unknown reason, there are gaps between the elements( possibly due to margin or padding). How to remove this?
How to make this html cross browser, such that it works on all major browsers?
Thanks
Update : I have updated my stylesheet. Removed javascript code for height setting. Here is the updated link: https://jsfiddle.net/f4sc9sy7/9/ .
This now looks closed to expected layout. Now there is just one problem of total html height. It is going beyond the browser height, not sure how to correct it.
Here is the css code:
html {
background: #F5F4EF;
color: #000305;
margin: 0;
padding: 0;
width: auto;
height: 100%;
}
body{height: 100%;}
#side-nav {
float: left;
width: 20%;
height: 100%;
background: lavender;
}
#main-content {
float: right;
width: 80%;
height: 100%;
background: lightgreen;
}
header,
footer {
background-color: black;
color: #F5F4EF;
width: auto;
text-align: center;
margin: 0;
height: 5%;
padding: 0;
}
H1 { margin:0; }
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
#main-layout{
height: 90%;
margin:0;
}
2 answers
solution1
0 2017-03-08 09:44:28
add height:100%; to your html
html {
background: #F5F4EF;
color: #000305;
margin: 0;
padding: 0;
width: auto;
height:100%;
}
solution2
-1 2017-03-08 09:33:23
#main-layout {
min-height:100px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.