I'm trying to make an useful command-line layout just using CSS. My inkscape draft looks like this:
The bottom div has a fixed height and flexible width. The top div must have both dimensions flexible.
I need this to work on mobile devicest too. In past, I have made this design using rather complicated javascript script which breaks on mobile devices.
I've been trying to do it using height in "%" but that's not very precise I guess:
div#output {
width:99%;
height:90%; //NOT A GOOD IDEA. DEPENDS ON WINDOW SIZE
overflow: scroll;// - breaks on big/small screens
overflow-x: hidden;
margin:0px;
padding:5px;
}
My question is: How to do this with no javascript? How should I fix my jsFiddle example?
I'd use calc for the height of the output window here is the updated JSfiddle
*{
margin:0px;
padding:0px;
}
html, body {
height:100%;
}
body {
background: black;
color: white;
font-family: monospace;
font-size:0;
}
div#output {
height:calc(100% - 40px);
overflow-y: scroll;
overflow-x: hidden;
padding:5px;
font-size:14px;
}
div#bottom{
height:30px;
line-height:30px;
font-size:14px;
}
The font-size:0 for the body is necessary to remove redundant spaces between the two DIVs.
Calc is subtracting 40px since the bottom is 30px and the output has a padding of 5px.
without using Calc is also possible with absolute positioning Here
*{
margin:0px;
padding:0px;
}
html, body {
height:100%;
}
body {
background: black;
color: white;
font-family: monospace;
font-size:0;
}
div#output {
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:30px;
overflow-y: scroll;
overflow-x: hidden;
font-size:14px;
}
div#bottom{
position:absolute;
left:5px;
bottom:0;
height:30px;
line-height:30px;
font-size:14px;
}
Set the height of the html and body to 100%. That is what the 90% is scaling against.
I'd do it like this http://jsfiddle.net/081tcm3m/1/
There is no need to set width to block elements. It's the height important here. Setting it to 100% to body makes page fit the available screen height (if there is no margin).
edit
You are right, dimensions in % are not precise, so I decided to use position absolute and right, left, top, bottom properties to stretch div#output and make fixed margin for bottom input line.
Try http://jsfiddle.net/081tcm3m/4/
Related
I am currently facing a problem with Google Material Design Lite. If you take a look at the portfolio example from Google https://getmdl.io/templates/portfolio/about.html and simulate a large screen the footer doesn't stay at the bottom. Is there a solution for this?
I found two similar questions but they were about a sticky footer. I would like to have the footer always at the end of the page and if the page is scrollable, the footer should only visible when you are at the bottom.
You need to put your set a specific min-height to .mdl-grid.portfolio-max-width,
Just like:
/* When the Navbar is big */
.mdl-grid.portfolio-max-width {
min-height: calc(100vh - 316px);
}
/* When the Navbar is small */
.mdl-grid.portfolio-max-width {
min-height: calc(100vh - 180px);
}
This will work.
Hope this helps!
EDIT
Final solution for me:
/* When the Navbar is big */
.mdl-grid.portfolio-max-width {
min-height: calc(100vh - 316px);
display: block;
}
/* When the Navbar is small */
.mdl-layout__content.header-is-compact > .mdl-grid.portfolio-max-width {
min-height: calc(100vh - 137px);
}
and the following lines to the scroll handler in the MDL JavaScript file:
this.content_.classList.add('header-is-compact');
// the following line to the else if where all the classes get removed
this.content_.classList.remove('header-is-compact');
Let me know if this is what you want
Add a wrapper class around the existing code. Make the wrapper class relative positioned. get the height of the footer and explicitly declare that. Assign the same value as padding bottom to the wrapper class.
.wrapper{
position:relative;
padding-bottom:75px;
}
#textbox {
background:rgba(255,255,255,1);
padding:10px;
font-family:arial;
z-index:-1;
box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:10px;
line-height:25px;
display:block;
}
#footer {
background-color:white;
width:50000px;
position:absolute;
bottom:0px;
left:0px;
color:black;
font-family:arial;
border:0px;
margin:0px;
display:block;
height:75px;
}
So I'm trying to design a webpage and was trying to get the footer to stick to the bottom of the page at all times. I did manage to do that with trouble but I figured out where my error was. What I want to know is what is the difference between doing this,
body {
background: red;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background: black;
padding:10px;
}
#content {
background: green;
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
and doing this,
html,
body {
background: red;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background: black;
padding:10px;
}
#content {
background: green;
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Why does putting the html part at the top make the footer part of the code work? It doesn't seem to effect any of the other code, just the part that makes the footer stay at the bottom. This isn't my code just the code I got from here I have the same issue in my code though and was just wondering what the deal was cause I can't find anything on this.
http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/
Sorry if I wrote this wrong first time posting.
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.
the absolute position must be relative to another element and in your case the footer is relative to the body. By default the height of body and html isn't 100% to the screen, so if you make your footer absolute to the bottom of body it will be at the bottom of body not the screen so to solve this you made the body height is 100% of the html which must be also 100% to the screen.
you can also use the fixed position instead of absolute, position:fixed will be relative to the screen not to any other element so you footer will be in the bottom even the body and html height isn't 100%
I'm very surprised: there are tons of posts asking about 100% height situations, but the ones that include *margins in the child element don't yield any workable responses.
Surely this is very common, no? I'm struggling with my margins causing the child element to overflow. See fiddle below.
My CSS is like so:
html, body {height:100%} // definitely doing that one for 100% height issues
div {
box-sizing:border-box; // I like my box model consistent, need only webkit
}
#outer {
border:1px solid #f00;
position:absolute; // this is a requirement
top:40px;
left:12px;
width:300px;
}
#inner {
position:relative; // I'm really hoping to avoid absolute
border:1px solid #0f0;
margin:10px 20px;
height:100%;
width:100%;
}
Fiddle: http://jsfiddle.net/3aPzq/
The prized question is: how to get the child element (green border) to properly be inline of its parent, with correct margins?
You can't use width 100% in the case, because width is calculated before apply the margin. So the inner div will have 300px width, and then 20px margin.
It's better to use only margin parameters:
#inner {
position:relative;
border:1px solid #0f0;
margin:10px 20px 10px 20px;
}
if you wanna have inner box stay inside the outer box, then i wouldn't use margin, instead i'll use padding
#inner {
position:relative; // I'm really hoping to avoid absolute
border:1px solid #0f0;
padding:10px 20px;
height:100%;
width:100%;
}
I am creating a site for which I have created a structure but I am facing height issue in that. here is what I am expecting
but this is what I am getting
Below is the CSS:
html {height:100%!important;}
body {
margin:0;
font:12px/15px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#8a8a8a;
min-width:1000px;
background:#fff;
min-height:100%!important;
}
#wrapper {
position:relative;
min-height:100%;
overflow:hidden;
background:url(../images/wrapper.jpeg) repeat-y;
}
#content {
float:left;
width:100%;
min-height:100%;
}
100% is just getting set to 100% of the content in it , try using a pixel height instead
#content {
float:left;
width:100%;
min-height:500px;
}
I would put a min-height in pixels on your wrapper. Since the #content is set to 100% height, it will fill all of the wrapper.
This way, if there is less content than needed to fill the full height of the browser, the page will add whitespace below your content to fill the browser height. I do this often when first building out a new page, since I don't have any content, but want to get an idea of how it will look when filling the browser window.
I would suggest doing something like this:
#wrapper {
position: relative;
min-height: 600px;
overflow: hidden;
background: url(../images/wrapper.jpeg) repeat-y;
}
You might want to adjust the min-height in pixels to fit your site- whatever it takes to make it fill the browser window.
A IE Resizing problem!? The code is pretty simple: I've got a div and I want a text-box that's 100% of the DIV. It must show the red line of the div (if I use height:100%, width:100% it eats away my border :-( ).
Html:
<div>
<textarea></textarea>
</div>
Css:
div{
width:500px;
height:500px;
border:solid 1px red;
padding:1px;
position:absolute;
top:100px;
}
textarea{
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
}
I hope you guys have a clue. The DTD in the example is HTML Strict. Code example: http://jsfiddle.net/QJYuz/
I'm trying to find the reason why as well. Please specify any links to blogs / specifications why this problem occurs.
IE doesn't support setting both left and right (nor top and bottom) at the same time. Instead try setting width and height to 100% (but you'll need to remove padding and border in that case):
textarea{
position:absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
border: none;
padding: 0;
}
Try doing
textarea {
height: 100%;
width: 100%;
}
instead. While some browsers do honor setting the top/bottom/left/right all at the same time, it's not standard.
One method that looks good in both: http://jsfiddle.net/QJYuz/6/
My change to textarea:
textarea{
position:absolute;
top:0px;
left:0px;
width: 99%;
height: 98%;
overflow: auto;
}
I just set the width and height to 99% and 98%. It looks good in both and saves the border. I also put in the overflow: auto to get rid if IE8's ugly grayed-out scrollbar, until you actually need a scrollbar.