Hi I created a simple template for a "Backend"-Solution.
It looks kinda this :
<div id="topnavi"></div>
<div id="mainnavi"></div>
<div id="content"></div>
*{
margin:0;
padding:0;
}
body {
background-color:#FCFCFC;
}
#topnavi {
width:100%;
height:55px;
background-image:url('randomurl');
background-repeat:repeat-x;
margin-bottom:1px;
}
#mainnavi {
width:200px;
display:table-cell;
background-color:#333333;
}
#content {
display:table-cell;
}
So on TOP there is a Navigation bar with logo and stuff which is set on 55px height (+1px margin on the bottom). Now I want the sidenavigation to take 100% of the browsers window (without scrolling) but if I set
*{height:100%}
#mainnavi{100%}
I get a scrollbar because of the 55+1px from the topnavi (at least thats what I guess).
I COULD set the #mainnavi stuff first and THEN set the #topnavi to position:absolute and just let it override it - BUT that would be a dirty solution in my eyes ... is there any other useful work-a-round ?
Try this:
#mainnavi{height:calc(100% - 56px);}
You can use calc from CSS3, but it will scale up to page height. If you want to scale it up to screen size, you can add position: absolute
Example: http://jsfiddle.net/fywZT/
The calc directive is definitely a solution in case your browser supports it. Anyway, I've found some issues in the past (issues like, for example, Safari 5 does not support it). Have you tried changing the box-sizing property? Something like:
-moz-box-sizing: border-box
Here I'm leaving you a link for you to have more information about it - http://www.w3schools.com/css/css_boxmodel.asp
Related
I have literally tried EVERYTHING to get this to work. I've read all other stackoverflow EVERYTHING.
I'm trying to get a DIV to go all the way to the bottom of the page. As you can see in the jsfiddle (via the side borders) it does not. it seems to stop at a height of 357px which is not the full height. I then find out that my div is 100% of the body because the body is also 357px even though I also specified that it should be 100%. Nothing is working and I'm not sure why. In my previous project I never had that problem. I just specified a min-height and when I added more content pass that min-height the div accompanied it. But this time it just overflows for some reason.
html, body {background-color:#F6EBBA;height:100%;position:relative;}
#main-body{
display:block;
height:100% !important;
margin-left:16%;
margin-right:30%;
border:1px solid #dead68;
border-top:none;
border-bottom:none;
bottom:0}
http://jsfiddle.net/R96Lc/
My website had much more content but I had to delete js, css which was not needed and changed the html to so that you could see what I am talking about.
Thanks in advance.
LIVE DEMO
You can declare min-height here:
html, body { background-color:#F6EBBA;
min-height:100%;
position:relative;
}
Remove the height declaration from the #main-body selector.
#main-body{
display:block;
margin-left:16%;
margin-right:30%;
border:1px solid #dead68;
border-top:none;
border-bottom:none;
}
Working fiddle: http://jsfiddle.net/EfrainReyes/5tS8y/1/
If you change your height to auto or just don't define a height, it automatically contains all text that's inside the div. Here is a working version. I've also tidied up your code (just clicked the TidyUp button), so that it is readable.
I have just played with the fiddle, changing:
height:100% !important;
To
min-height:100% !important;
Seems to fix the issue
New fiddle: http://jsfiddle.net/R96Lc/2/
you are declaring
bottom 0
but the div is not absolute, you could also dont declare any kind of height.
I'm redesigning my website, and at the moment I'm just blacking out the layout. I have a class that centres everything:
.centre
{
position:absolute;
left:50%;
top:50%;
}
everything is then offset using a margin.
I have a wrapper that gives the min-height and min-width
#wrapper {
position:relative;
left:0px;
top:0px;
min-height:600px;
min-width:600px;
}
The min-width and min-height both do their job but for some reason after this wrapper is applied the website is no longer centered vertically.
You can see the website here: http://testerwebby.tumblr.com/
I'm wondering what's the cause of this, and what's the solution.
Thanks,
Dillon Brannick.
Your problem is that your page's body does not fill the whole browser window vertically. You can check this by using Firebug and hovering your body element - not the whole browser window will get a blue hue.
Try to fix this with the following CSS:
html, body
{
height: 100%;
}
I'm trying to use both fixed-width and stretchy CSS content, similar to what is seen on Google Calendar. I assumed this would be easily achievable using min-width and max-width, however I am having trouble with sub-elements which are simply sticking to their minimum widths rather than stretching to the maximum.
A demo can be seen here.
You actually don't need setting min/max width anyway.
http://jsfiddle.net/UyZ6T/1/
The problem was basically the float: left; on the stretch-1. You only need that on the fixed size part. It basically means: 'I am on the left now, and everything else takes the space to the right'. A div with float property tries to take as little space as possible, so that the rest can stretch.
remove float:left from #stretch-1. fiddle
Your're essentially trying to create a fluid layout that contains fixed width elements, you need to set percentage widths on all of parent elements in order toget this to work like google calendar - change your css to the following
#container {
max-width:1280px;
min-width:260px;
width:90%;
height:200px;
margin:auto;
background:#000;
}
#fixed-1 {
width:200px;
height:200px;
float:left;
background:#3fb44a;
}
#stretch-1 {
min-width:60px;
width:20%;
height:200px;
float:left;
background:#c44d58;
}
#sub-content {
width:100%;
height:20px;
background:#4788ef;
}
How can I make DIV width 100% (body width) with CSS? Currently, my div (.MainHeading) width is set as 100%, but it doesn't display like 100% when the content width in another div is greater than the screen size. It just displays in top-left corner.
I've been searching for the solution for some time but I haven't found it yet...
This is my CSS:
body
{
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.MainHeading
{
margin: 0 auto;
background-color:Gray;
background-repeat:repeat-x;
height:auto;
min-height:93px;
width:100%;
}
.Body-Area
{
margin:0 auto;
overflow:visible;
width:950px;
max-width:950px;
height:100%;
min-height:395px;
}
.Container
{
display:table-row;
position:relative;
}
.Mid-Div
{
display:table-cell;
position:relative;
padding-left:2%;
padding-right:2%;
float:left; /*for IE 7 & 9 Compatible View*/
overflow-x:auto;/*for IE 8*/
vertical-align:top;
width:100%;
max-width:950px;
overflow:hidden;
}
And here is my HTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="MainHeading">
</div>
<div class="Body-Area">
<div class="Container">
<div class="Mid-Div">
<img align="bottom" width="1224" vspace="1" lang="en" hspace="1" height="332" border="1" src="images/cover2.png" alt="Test" id="imgtest" dir="ltr" />
</div>
</div>
</div>
</body>
</html>
I've run this code and it seems to be fine. The heading div is 100% of the body, which in turn is the full width of the viewport.
Update in reply to comment:
I finally see now. You have a mistaken assumption, which is that the image is expanding the body. In fact, your body remains at 950px, even with min-width, because the image is not expanding it. So the 100% is actually correct.
The problem isn't the width setting, it's the float on your Mid-div. Floating takes it out of layout, so the contents of that div are not pushing the page larger. You have to find a method that eliminates the float. You also have a max-width of 950, so if you want the body to grow, you have to get rid of that. Otherwise the image will simply clip. If clipping the image is acceptable, then perfect. :-)
My advice, and I'm sure it sucks to hear this, is to rethink your approach from the ground up. Adding a bit here and a bit there, subtracting something, changing a value... these are going to lead to a mess. The problem you want to solve should be very simple and require not too many rules... write some "requirements" (what must the page do, and under what circumstances) and then rewrite the CSS.
In any event, here's a "proof of concept" branch of sandeep's fiddle without the float; the image is clipped rather than expanding body (due to min-width):
http://jsfiddle.net/ZMWpW/1/
Define min-width to your body. write like this:
body{
min-width:950px;
}
Check this http://jsfiddle.net/ZMWpW/
I know I'm answering like a year after this question was asked, but I just had the same issue and found this post; the base for my answer is the one already published by sandeep.
Define min-width to 950 on your .MeanHeading div, that should do the trick, however it has a downside, it would be the minimum width of your heading if you dont have a problem with this I think you are good to go.
So I have an element that is placed directly inside body:
<body>
<div id="header">Some stuff...</div>
Other stuff...
</body>
The following is the CSS used:
body{
text-align:center;
}
#header{
margin:auto;
}
So the #header div is set to 100% width (default) and is centered. Problem is, there's a "space" between the window border and the #header element... Like:
| |----header----| |
^window border ^window border
I tried adjusting it with javascript, and it successfully resizes the element to the exact window width, but it doesn't eliminate the "space":
$('#header').width($(window).width());
One solution seems to be to add the following CSS rules (and keep the javascript above):
#header{
margin:auto;
position:relative;
top:-8px;
left:-8px;
}
In my browser this "space" is 8px - but I'm not sure if that's the same across all browsers? I'm using Firefox on Ubuntu...
So what's the right way for getting rid of this space - and if it's what I used above, do all browsers act the same?
body has default margins on all browsers, so all you need to do is shave them off:
body {
margin: 0;
text-align: center;
}
You can then remove the negative margins from #header.
An easy way to solve this problem is by getting rid of all the margins. And you can do that by the following code:
* {
margin:0;
}
This will solve the problem and will give you finer control over the margins of all elements.
Add these to the style tag in body, like the following one:
body { margin:0px; padding:0px; }
It worked for me. Good luck!!
I found this problem continued even when setting the BODY MARGIN to zero.
However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.
body { margin:0px; }
header { border:1px black solid; }
Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.