I have a simple page: 5 rows (4 rows explicitly defined height [header, bredcrumb, trademark, footer], 1 row set to 100% [content]) that all display on a web page.
However, my CSS renders perfectly in Firefox, Chrome, Internet Explorer and Safari. Opera hates me and adds a scrollbar.
How do I structure the CSS so that this fits all 5 browsers, without adding a scrollbar to ANY browser?
HTML:
<html>
<head>
</head>
<body>
<div class='header'>
</div>
<div class='breadcrumb'>
</div>
<div class='content'>
<div class='panels'>
<div class='panel-a'>
</div>
<div class='panel-b'>
</div>
<div class='panel-c'>
</div>
</div>
</div>
<div class='trademark'>
</div>
<div class='footer'>
</div>
</body>
</html>
CSS:
div.header,
div.breadcrumb,
div.content,
div.trademark,
div.footer {
display: table-row;
width: 100.00%;
}
div.header {
height: 2em;
}
div.breadcrumb {
height: 1.5em;
}
div.content {
height: 100%;
}
div.panels {
display: table-cell;
height: 100%;
width: 100%;
}
div.panel-table {
display: table;
height: 100%;
width: 100%;
}
div.panel-a,
div.panel-b,
div.panel-c {
display: table-cell;
}
div.trademark {
height: 1.25em;
}
div.footer {
height: 2em;
}
I cannot test it due to not having opera but my guess would be that you need to remove padding and margins from body
html, body{
padding: 0;
margin: 0;
}
Related
I found a post here where the same question was asked before. I implemented the solution suggested there and it works fine with Chrome and Firefox. But when I tested it on Safari and Opera, I ended up with a long horizontal scrollbar. I'm not sure how to fix it since I've already added using overflow-x: hidden to the body. You can see it in action here.
HTML
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
CSS
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
border:1px solid black;
}
.level {
height:100px;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
I checked in the link(www.kampuster.com) you shared and found the problem with your code.
Problem:
In file all/themes/bootstrap_kampuster/css/style.css, you have provided width: 9999px; for classes .homeBanner:before, .homeBanner:after and .countUpSection:before, .countUpSection:after which is causing the whole problem and is not the right way to do it.
Suggestion:
Below is the approach I would suggest you to go with.
Here is a pen to better illustrate the suggestion.
.section-first, .section-third {
background-image: url('http://www.kampuster.com/sites/default/files/bannerlogo_babson.jpeg');
background-attachment: fixed;
background-size: cover;
}
.section-first-inner {
background-color: rgba(83, 192, 183, 0.3);
}
.section-first, .section-second, .section-third {
/* this is just to add height inplace of content */
height: 600px;
color: #ffffff;
overflow: hidden;
}
.section-first-inner, .section-second-inner, .section-third-inner {
padding: 20px 20px;
font-size: 18px;
height: 100%;
}
.section-second {
color: #000;
}
<link href="http://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
</head>
<body>
<div class="main-container">
<header id="page-header"></header>
<div class="section-first">
<div class="section-first-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section first goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-second">
<div class="section-second-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section second goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-third">
<div class="section-third-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">Your content for section third goes here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Instead of setting width:960px; on the container try setting view width: width: 100vw;
So the container css will be:
.container {
width: 100vw;
margin: 0 auto;
border:1px solid black;
}
just use .container-fluid class.
<div class="container-fluid" style="background-image:url('xample.jpg')">
<div class="row">
<div class="col-sm-12">
<div class="container">
<div class="row">
<div class="col-sm-12">
your content here
</div>
</div>
</div>
</div>
</div>
Full width background inside Bootstrap container!!
If this is what you want (Example Demo)
Then simply use Relative Lengths :
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
I have only replaced 2 values in your code:
.container {
width:100vw;
}
.purple:after {
width: 100vw; /* some huge width */
}
Code:
<!-- Latest compiled and minified CSS -->
<
link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- jQuery library -->
<
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < /script>
<!-- Latest compiled JavaScript -->
<
script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script>
html,
body {
overflow-x: hidden;
}
.container {
width: 100vw;
margin: 0 auto;
border: 1px solid black;
}
.level {
height: 100vh;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399;
/* Match the background */
top: 0;
bottom: 0;
width: 100vw;
/* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
Please try this, this is working for me.
add the below css, if doesn't work try adding important to them. And to get full width of container, add container-fluid class to particular container.
html, body {
width: -webkit-fill-available;
overflow-x: hidden;
}
I'm using a table layout for my website. It's working in IE and Chrome, even IE 8 perfectly. My entire website is in one table with three cells. The top navbar, the content, and the bottom footer navbar. The table's width and min-height is set to 100%, and the middle cell is set to height: auto. This makes the footer get pushed to at least the bottom of the window, and if there is enough content the footer is painlessly pushed farther along with the content.
But Firefox won't make the middle cell's height fill to reach the table's min-height of 100%.
Here is what it looks like in Internet Explorer and Chrome (working):
but in Firefox the middle cell's height isn't filling (not working):
Here is my CSS:
<style>
#tablecontainer{
width: 100%;
min-height: 100%;
}
.table-panel {
display: table;
}
.table-panel > div {
display: table-row;
}
.table-panel > div.fill {
height: auto;
}
/* Unimportant styles just to make the demo looks better */
#top-cell {
height: 50px;
background-color:aqua;
}
#middle-cell {
/* nothing here yet */
background-color:purple;
}
#bottom-cell {
height:50px;
background-color:red;
}
body {
height: 100%;
margin: 0;
}
html {
height: 100%;
}
Here is my HTML:
<body>
<div id="tablecontainer" class="table-panel">
<div id="top-cell">
<nav>
</nav>
</div>
<div id="middle-cell" class="fill">
<div class="section">
<div class="container">
<p>{{ content }}</p>
</div>
</div>
</div>
<div id="bottom-cell">
<nav>
<p>I'm the footer!</p>
</nav>
</div>
</body>
Here's a fiddle. https://jsfiddle.net/mmgftmyr/ It is completely accurate, the fiddle will work in Chrome and Internet Explorer but not Firefox.
Problem exists in the following styles:
#tablecontainer {
min-height: 100%; /* change min-height to height */
width: 100%;
}
.table-panel {
display: table;
}
min-height: 100% property doesn't work properly with min-height always. Change min-height to height and it will work.
Note: HTML tables have special behavior with height. If you specify height for a table or and element having display: table and its content doesn't fit in then its height will be increased automatically according to the content. So we can always use height instead of min-height with tables.
#tablecontainer{
width: 100%;
height: 100%;
}
.table-panel {
display: table;
}
.table-panel > div {
display: table-row;
}
.table-panel > div.fill {
height: auto;
}
/* Unimportant styles just to make the demo looks better */
#top-cell {
height: 50px;
background-color:aqua;
}
#middle-cell {
/* nothing here yet */
background-color:purple;
}
#bottom-cell {
height:50px;
background-color:red;
}
body {
height: 100%;
margin: 0;
}
html {
height: 100%;
}
<div id="tablecontainer" class="table-panel">
<div id="top-cell">
<nav>
</nav>
</div>
<div id="middle-cell" class="fill">
<div class="section">
<div class="container">
<p>{{ content }}</p>
</div>
</div>
</div>
<div id="bottom-cell">
<nav>
<p>I'm the footer!</p>
</nav>
</div>
</div>
On Firefox, min-height is not interpreted on display: table; instead of using min-height use height:100%;
#tablecontainer{
width: 100%;
height:100%;
}
updated fiddle
I created a sample of the situation in JSFiddle
I updated JSFiddle Here: http://jsfiddle.net/x11joex11/r5spu85z/8/ (this shows in more detail how the sticky footer works so well, just height issue).
I want the table to take up the remaining height, for some reason the height: 100% is not working?
From my tests it appears to be related to min-height: 100%. I need that to make the sticky footer work.
So a solution for me is another way to do the sticky footer, or a way to still give 100% height to the elements within.
HTML
<div class="wrapper">
<div class="wrapper_content">
<!--Header-->
<div class="header">Header</div>
<div class="content table">
<div class="row">
<div class="l_cell">left</div>
<div class="r_cell">right</div>
</div>
</div>
<div class="push"></div>
</div>
</div>
<!--Footer-->
<div class="footer">Footer</div>
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -50px;
background-color: black;
}
.container {
}
.table {
display: table;
height: 100%;
width: 100%;
background-color: yellow;
}
.row {
display: table-row;
}
.l_cell {
display: table-cell;
width: 265px;
background-color: orange;
}
.r_cell {
display: table-cell;
background-color: purple;
}
.header {
background-color: red;
width: 100%;
}
.footer {
height: 50px;
background-color: green;
}
.push {
height: 50px;
}
Here is one solution, http://jsfiddle.net/7t4RT/
This question has been asked many times before. I recommend viewing some of the answers already provided here at StackOverflow.
The reason that we're unable to use height: 100% in your example is because no height has defined. The CSS is wondering... well how high is 100%? There are many ways to get our elements to fill their containers in either HTML or CSS. Simply choose one you feel works better for you.
The following is one of many ways to solve this problem.
HTML:
<div class="fill-height">
<p>Filled</p>
</div>
<div class="cant-fill-height">
<p>Not Filled</p>
</div>
CSS:
body {
background-color: #ccc;
}
.fill-height {
background-color: #0ff;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
}
.cant-fill-height {
background-color: #ff0;
width: 200px;
height: 100%;
margin-left: 200px;
}
I found an answer to my problem for now, but it requires the use of display:table which I recall causes other errors down the road, but it does appear to work right now to create the layout I had in mind.
http://jsfiddle.net/x11joex11/r5spu85z/10/
CSS
body,html{margin:0;padding:0;height:100%;}
.wrapper{}
.table{
height:100%;
width:100%;
display:table;
background-color:yellow;
}
.row{display:table-row;}
.cell{display:table-cell;}
.footer{background-color:green;height:50px;}
.header{background-color:red;height:30px;}
.left{background-color:purple;}
.right{background-color:orange;}
HTML
<div class="wrapper table">
<div class="header row">
Header<br/>
Header2
</div>
<div class="content table">
<div class="row">
<div class="cell left">leftt<br/>left2</div>
<div class="cell right">right<br/>right2</div>
</div>
</div>
<div class="footer row">
Footer
<br/>
Footer2
</div>
</div>
An answer not requiring the use of display:table or table tags is preferred.
Notice the sticky footer effect remains.
This is what I want to achieve:
Footer should stay at the bottom of the screen even if the content doesn't fill the viewport vertically.
Content columns have a border that should always be 100% content height. As the number and width of columns will change from page to page, background-image to fake column borders can’t be used.
There should be no scrollbars when all content is visible (Example 1).
Solution should be all HTML/CSS, no JS.
Minimum browser support should be IE9+ and latest desktop versions of Firefox, Chrome, Safari, Opera; with no quirks mode.
Width of the header/footer/content is always fixed (so header and footer don’t need to be placed inside content area). Height of header and footer is also fixed.
I’ve tried techniques from Fluid Width Equal Height Columns and this sticky footer example but haven’t been able to satisfy all the requirements at the same time. Any tips are appreciated.
Edit: So far the farthest I’ve got is by imitating tables which works correctly in webkit browsers but not in IE9 and Opera. See the fiddle here.
HTML:
<div class="table outer">
<div class="row header">
<div class="cell">header</div>
</div>
<div class="row content">
<div class="cell">
<div class="table inner">
<div class="row">
<div class="cell">content 1</div>
<div class="cell">content 2</div>
<div class="cell">content 3</div>
</div>
</div>
</div>
</div>
<div class="row footer">
<div class="cell">footer</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.table {
display: table;
min-height: 100%;
height: 100%;
}
.table.outer {
width: 500px;
margin: 0 auto;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.header, .footer {
height: 25px;
background-color: #999;
}
.content {
background-color: #eee;
}
.table.inner {
width: 100%;
min-height: 100%;
height: 100%;
}
.table.inner .cell {
width: 33%;
border-right: 1px dashed #c00;
}
While not a semantically desirable solution, the only way I could find to achieve all stated requirements is to go back to the 90s and use tables for layout.
See the fiddle here.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table class="outer">
<tr>
<td class="header" colspan="3">header</td>
</tr>
<tr class="content">
<td>content1</td>
<td>content2</td>
<td>content3</td>
</tr>
<tr>
<td class="footer" colspan="3">footer</td>
</tr>
</table>
</body>
</html>
CSS:
html, body {
height: 100%; margin: 0;
}
.outer {
min-height: 100%;
height: 100%;
width: 500px;
margin: 0 auto;
}
.header, .footer {
height: 25px; background-color: #999;
}
.content td {
width: 33%;
background-color: #eee;
border-right: 1px dashed #c00;
vertical-align: top;
}
Try this :
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
In case anyone is interested, I figured out a solution that uses jQuery (instead of tables).
http://benpearson.com.au/web-development/3-column-fluid-layout-with-header-sticky-footer-and-100-percent-height-columns/
I have the following html/css code: http://jsfiddle.net/J3YZ8/4/
HTML:
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
CSS:
* {
padding: 0px;
margin: 0px;
}
html {
height: 100%;
}
body {
direction: rtl;
height: 100%;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
#headerDiv {
height: 20%;
margin-bottom: 1%;
}
#footerDiv {
height: 10%;
margin-top: 1%;
}
#headerDiv,
#footerDiv {
clear: both;
background-color: #FF5500;
}
#bodyDiv {
height: 68%;
margin: 0% 2%;
}
#loginContainer {
background: green;
margin-bottom: 1%;
}
#menuContainer {
background: blue;
margin-top: 1%;
}
#loginContainer,
#menuContainer {
display: inline-block;
width: 29%;
margin-left: 1%;
height: 49%;
}
#contentContainer {
width: 69%;
height: 100%;
background: yellow;
float: left;
margin-right: 1%;
}
If you use this code on your browser (without jsfiddle) you will see there is no margin between the blue div (menuContainer) and the footer. In jsfiddle the margin is not equal to the margin between the yellow div (contentContainer) and the footer although it should be the same. How can I fix it?
More details:
this is image from jsfiddle result:
this is image from full screen result:
Does anyone knows how to fix it??
I do see a margin below the blue panel.
A height of 100% the html element does not mean "not higher than the window". If you don't want to scroll the page you could set overflow:hidden on the html. But then you won't see the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
</div>
<div id="footerDiv">FooterPanel</div>
One of the main problems is that you have a second closing div with no opening - this can through IE in quirks mode and also cause other issues when working with floats and clears in CSS.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
Above is corrected code that should fix it - at least a start.
Are you looking to build a fluid height and width layout?
Also you need to clear the floats before you start the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div style="clear:both;"></div>
<div id="footerDiv">FooterPanel</div>
There is a working sample of the code maintaining your margin.