jsFiddle: https://jsfiddle.net/g334qt1y/2/
This happens in Firefox, Chrome and IE.
Javascript libraries often insert empty nodes at the bottom of the page, such as the iframe in this example. I have tried to set it so it is takes no dimension. However it still creates one empty row right after the footer (in white).
Margins, paddings, line-heights have all been dealt with. However I can still see one thin white line at the bottom.
To qualify for bounty, I would like to know the root CSS rule causing this, and preferably a general way to disable that rule.
HTML:
<header>
header
</header>
<footer>
footer
</footer>
<iframe width="0" height="0" frameborder="0" src="javascript:void(0)" name="test"></iframe>
CSS:
html {
height: 100%;
}
body {
min-height: 100%;
}
body, html {
line-height: 0;
margin: 0;
padding: 0;
}
header {
display: block;
height: 800px;
margin: 0;
background-color: #eeeeee;
padding: 1em;
}
footer {
display: block;
height: 40px;
margin: 0;
background-color: blue;
padding: 1em;
}
iframe {
height: 0px;
width: 0px;
background-color: yellow;
}
Set your iframe to display:none, and you have that white space removed.
snippet below:
html {
height: 100%;
}
body {
min-height: 100%;
}
body,
html {
line-height: 0;
margin: 0;
padding: 0;
}
header {
display: block;
height: 800px;
margin: 0;
background-color: #eeeeee;
padding: 1em;
}
footer {
display: block;
height: 40px;
margin: 0;
background-color: blue;
padding: 1em;
}
iframe {
display:none
}
<header>
header
</header>
<footer>
footer
</footer>
<iframe width="0" height="0" frameborder="0" src="javascript:void(0)" name="test"></iframe>
UPDATE
For bounty purposes (as OP asked), here is an explanation:
HTML <iframe> Element (or HTML inline frame element) is an inline
element. Therefore takes whitespace in your HTML into account.
So a solution is:
apply display:block to iframe
html {
height: 100%;
}
body {
min-height: 100%;
}
body,
html {
line-height: 0;
margin: 0;
padding: 0;
}
header {
display: block;
height: 800px;
margin: 0;
background-color: #eeeeee;
padding: 1em;
}
footer {
display: block;
height: 40px;
margin: 0;
background-color: blue;
padding: 1em;
}
iframe {
display: block;
}
<header>
header
</header>
<footer>
footer
</footer>
<iframe width="0" height="0" frameborder="0" src="javascript:void(0)" name="test"></iframe>
Iframe does not take up any space here. The space you see under footer is caused by html/body line-height, you can set it to 0 to get rid of it.
You don't need to put 'margin :0' in footer class try to replace it with 'margin-bottom :-5px' you'll be able to remove the white space at the bottom of the page!! You can refer the following Fiddle a link!
footer {
display: block;
height: 40px;
margin-bottom : -5px;
background-color: blue;
padding: 1em;
}
If you're only dealing with empty iframes and assuming that regular iframes will have the source set to a URL and, if set as a node by a library, it always lists the source as javascript:void(0), you can use that as an attribute selector ...
iframe[src="javascript:void(0)"]{
display: none;
}
That's making a lot of assumptions though.
Updated your fiddle HERE
Related
Minimal example for my question:
console.log(document.getElementById('form').offsetHeight)
console.log(document.getElementById('textarea').offsetHeight)
form {
background: orange;
}
textarea {
background: lightblue;
border: 0;
box-sizing: border-box;
height: 100px;
}
<form id="form"><textarea id="textarea"></textarea></form>
The <textarea> has a height of 100px but <form> has a height of 4px? Where is the extra 4px of height for the <textarea> coming from? How can I eliminate the extra height?
I think it's because the textarea's display property is initially set as inline-block (see the Styling with CSS section). This stack overflow post's accepted answer provides a nice explanation of why it's displaying the additional "height" (that you're experiencing). According to the post, the following solutions seem to remedy the issue:
set the display property to block or
set the vertical-align property to top
With display: block:
form {
background: orange;
padding: 0;
}
textarea {
padding: 0;
margin: 0;
background: lightblue;
height: 100px;
display: block;
}
<form id="form"><textarea id="textarea"></textarea></form>
With vertical-align: top:
form {
background: orange;
padding: 0;
}
textarea {
padding: 0;
margin: 0;
background: lightblue;
height: 100px;
vertical-align: top;
}
<form id="form"><textarea id="textarea"></textarea></form>
A <textarea> is inherently a display-block (essentially adding a 'space').
Try adding display: block
form {
background: orange;
padding: 0;
}
textarea {
padding: 0;
margin: 0;
display: block;
background: lightblue;
height: 100px;
}
<form id="form"><textarea id="textarea"></textarea></form>
Really simple code, the strip I created has a margin or spacing around it and I want it to fill the whole top side of the page.
.header {
background: #555;
color: #f1f1f1;
height: 100px;
/* width: 100%; */
margin: 0;
padding: 0;
border: none;
}
<div class="header" id="myHeader"></div>
These are the margins that come from body.
In CSS you can set the margins of body to 0.
body {
margin: 0;
}
Also note that your <html></html> tags should be surrounding your entire html and your <body></body> tags should be holding all representational elements.
To fill the whole top side of the page, you should set the body's margin to 0px.
.header {
background: #555;
color: #f1f1f1;
height: 100px;
/* width: 100%; */
margin: 0;
padding: 0;
border: none;
}
body {
margin: 0px;
}
<div class="header" id="myHeader"></div>
I have a sidebar on the left which is fixed (width: 400px) and content on the right which should contain the rest of the space. While using fill-available: the sidebar changes its width to 309px.
Why doesn't fill-available work properly? Is there a possibility to set content in the remained space?
Please find the codepen here: https://codepen.io/ullaakut/pen/eQxbvY
Thanks!
As here
fill-available ???. One of life's great mysteries
You can use calc (400px of sidebar width + padding=480px)
body {
display: flex;
height: 100vh;
}
#sidebar {
width: 400px;
height: 100%;
}
#content {
width: calc(100% - 480px);
}
/* Just style related CSS rules, deleting those does not fix the problem. This is just to make the codepen clearer. */
body {
color: white;
font-size: 14pt;
margin: 0;
}
#sidebar {
padding: 20px;
background: #3c3c3c;
}
#content {
padding: 20px;
background: grey;
}
<body>
<div id="sidebar">This should be exactly 400 pixels but it is 336.83px</div>
<div id="content">This should fill the available space and not take space over the sidebar</div>
</body>
fill-avaible is something that have different behaver in different browser but if you add width: 100% before it can be used from that browser that don't support it.
body {
display: flex;
height: 100vh;
}
#sidebar {
width: 400px;
height: 100%;
}
#content {
width: 100%;
width: -moz-available;
width: -webkit-fill-available;
width: fill-available;
}
/* Just style related CSS rules, deleting those does not fix the problem. This is just to make the codepen clearer. */
body {
color: white;
font-size: 14pt;
margin: 0;
}
#sidebar {
padding: 20px;
background: #3c3c3c;
}
#content {
padding: 20px;
background: grey;
}
<body>
<div id="sidebar">This should be exactly 400 pixels but it is 336.83px</div>
<div id="content">This should fill the available space and not take space over the sidebar</div>
</body>
I'm having an issue with the age-old problem of 100% height. I know this problem is asked a lot, and I have reviewed this, this, this and countless more. I want to create a basic fixed header, side navigation and main article area, that looks like this:
But, for some reason it's looking like the following (I put 200px padding in the blue bar just to have it appear).
My HTML looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<article></article>
</section>
</body>
</html>
And my CSS looks like this:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
}
nav {
background-color: #747feb;
float: left;
min-height: 100%;
padding-bottom: 200px;
width: 150px;
}
article {
background: #74eb8a;
margin: 20px 20px 20px 170px;
min-height: 100%;
padding: 20px;
position: relative;
}
As you can see, nothing too special. I know that section needs 100% height, and so does body and html. I can position the nav and acticle absolutely, and make something like this:
But, in my actual site (I simplified it for this), the side navigation has drop-downs, which will change the navigation height dynamically. This causes the following to happen:
Absolutely positioned elements won't change the height of the relative wrapper, so I need to float them. However, floating them doesn't make the height become 100%.
I have even made a JSFiddle to show the problem: http://jsfiddle.net/g8VjP/
If anybody can help me out, I'll really appreciate it.
Thank you!
PS: I'm all for using calc() if it works!
SOLUTION
I modified Mayank's answer and managed to come up with a solution. I had to add a couple wrappers, but it worked. My HTML now looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<div class="cell-wrap">
<div class="table-wrap">
<article></article>
</div>
</div>
</section>
</body>
</html>
With the key being the cell-wrap and table-wrap. I have the nav is one table-cell and the .cell-wrap is another. With the nav having a fixed with, the .cell-wrap fills in the rest. However, I want spacing around the article, so I added .table-cell and made that into a table. That then expands and fills the height and width of the .cell-wrap. I then add 30px padding to give a space around the article (because margins don't work on table-cells) and made the article a table cell.
A bit confusing, but it works!
My CSS is as follows:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
display: table;
height: 100%;
min-height: 100%;
padding-top: 100px;
position: relative;
width: 100%;
}
nav {
background-color: #657182;
display: table-cell;
min-height: 100%;
width: 150px;
}
.cell-wrap {
display: table-cell;
height: 100%;
min-height: 100%;
}
.table-wrap {
display: table;
height: 100%;
padding: 30px;
width: 100%;
}
article {
background: none repeat scroll 0 0 #FFFFFF;
display: table-cell;
min-height: 100%;
padding: 20px 20px 120px;
z-index: 1;
}
Here's the fiddle. Not sure why there's a scroll bar at the bottom though, but it seems fine if you show it just normally in your browser.
height: 100% means 100% of the containing block's height. Your containing block, section, does not have a defined height (but a min-height instead). You can either:
Change min-height: 100% on section to height: 100%. or...
Keep min-height: 100% and add a height: 1px (or anything less than 100%) which will be overridden by min-height.
The key here is to have a height property set on the parent.
display:table and display:tabel-cell are you friends here mate!!
Updated your fiddle to slight workarounds and here you go : DEMO
CSS to modify :
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
display:table;/* addition */
}
article {
background: #74eb8a;
margin: 0px 20px 0px 170px;
min-height: 100%;
width:100%;
height: 100%;
position: relative;
display:table-cell; /* addition */
}
Additionally i took the liberty to remove the extra padding that you have placed inside article , insert a div or section inside article and assign padding to it if it works!!
try this :
nav {
background-color: #747feb;
width: 150px;
position : absolute;
top : 100px;
left : 0;
bottom : 0;
}
article {
background: #74eb8a;
position: absolute;
top : 100px;
left : 150px ; /* nav width*/
bottom : 0;
right : 0;
}
I've taken a look at the sticky footer CSS and have tried to make changes to my CSS so I could get this concept but no luck as I can't change html & body to 100% height.
Here's the sticky footer CSS that I'd like
And here's the link to my web page that I'd like it on
& Here's my CSS
/* Main content styles */
body {
font-family: Helvetica Neue: Regular;
}
html, body, div, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
}
/* Container */
#container {
margin: 0 auto;
width: 960px;
}
/* Content */
#content {
width: 642px;
float: right;
padding: 20px 0 0 0;
}
#content h1 {
padding: 0 0 20px 0;
margin: 0 0 20px 20px;
border-bottom: 1px solid #94b9c4;
}
.article {
padding: 5px 20px;
}
.articleimg {
float: left;
padding: 0 25px 0 0;
}
/* Footer */
#footer {
text-align: left;
position: relative;
width: 642px;
float: right;
clear: both;
}
#footer p {
font-family: Helvetica Neue: Regular;
font-size: 12px;
color: #94b9c4;
padding: 10px 0 0 0;
margin: 0 0 20px 20px;
border-top: 1px solid #94b9c4;
}
The only code that is important when using a sticky footer with CSS is the position attribute for the footer. In the HTML, make sure that the footer div is a child of the body:
HTML
<body>
<div class="content">...</div>
<div class="footer">...</div>
</body>
The reason it needs to be a child of the body is because position in CSS is based on the positioning of its closest ancestor. If you position the footer absolutely within another <div> than you always have to be cognizant about that containers position. Anyway, the CSS should be like so:
CSS
.footer {
position: fixed;
bottom: 0;
left: 0; // remove this if you have a specified width for the footer
right: 0; // remove this too
height: 100px; // you can change this
}
The previous code should create a footer that spans the whole bottom of the page with 100px height. This will stick the footer to the bottom of the page no matter what. However, you must also keep in mind that this footer will need to be accounted for so that it does not cover your content. I typically will add a padding on the bottom of my content area roughly the same as the height of my footer. Hope this helps!
Even though this footer you use in your question will work, let me show you another way, that uses less code in both CSS and HTML. This will create a footer, that is sticky to the bottom of the viewport or the content, depending which is longer. So this one is not fixed.
HTML
<body>
<h1>Any content without the need of a wrapper</h1>
<footer></footer>
</body>
CSS
html {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
/* the margin compensates the footer's height plus and margin if you want one */
margin: 0 0 100px 0;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
Demo
Try before buy
on your page, keep as the child of the body. for example:
<body>
<div class="main">
<p>"paragraph"</p>
</div>
<footer>
<p>Created by </p>
</footer>
</body>
in css file
body {
.
.
.
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
flex-grow: 1;
}