I have an element with width 100% of the body and i need to be able to give it padding in pixels. every attempt i had at it ended up adding scrolling. i can't use overflow:hidden because i need to have vertical scrolling, and overflow-x/y isn't fully supported yet.
so how can i add fiexed padding to an element with a 100% width?
Try using this:
<body>
<div style="width:auto; background-color:#333333;height:100%; padding:10px; color:#FFFFFF;">
Example
</div>
</body>
I do not encourage you to use inline styling
If you give padding to body (which is 100% by default), it will increase the width of the page and add scrollbars.
You need to create a DIV within body and work in it.
Related
I have a container div that has the height of my body which is 100%
#pageContainer{
width:800px;
margin:auto;
height:inherit;
}
inside it i have second div positioned absolutely
<div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
So my page looks like this:
<body>
<div id="pageContainer">
<div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
<div>some content here</div>
</div>
</body>
So the problem is the absolutely positioned div has height equal to the screen size, not the page, another words when page is heigher than the visible screen, when I scroll down the div is not expanding to the full height of the parent div (pageContainer). I have tried the top:0px;bottom:0px; as well and it doesn't work. Any one knows what's the trick here?
Javascript: You'd either use jQuery via .height() or EqualHeight,
or
CSS: you'd do something like this: CSS equal columns
You have to set the height of each element in the hierarchy to make it expand like this.
Try something like:
html, body {
height: 100%;
}
Setting the height of the html element is the one that I generally forget to do. It is usually also be necessary to set the #pageContainer height to 100%, although you have it inheriting from the body, so in this case you're okay.
Try adding position:relative; to your #pageContainer. Currently, the absolutely positioned div is taking it's position from the window and not the container div.
I'm developing something in asp.net and finally got round to creating the UI. I made a basic <div> element to wrap the content of my body in, and I notice that it auto fills the width to 100%. I create a new .aspx page to test it in, and the same results happen. So I create the following HTML document in notepad, save it as test.html and run it through Chrome, IE and Firefox and all three are returning a strip of 20px high and 100% width with a red background. Here's the code:
<head>
<style type="text/css">
#tester
{
height: 20px;
background-color: Red;
border: 1px;
}
</style>
</head>
<body>
<div id="tester">
</div>
</body>
Would anyone know what I could have done to make this so that it auto fills div elements to width: 100% on all browsers? I guess it's possible that I'm being absent minded and forgot that div elements did this automatically, but I'm 99% sure they didn't.
Thank you kindly,
Ben
From CSS 101 (BSD/MIT licences):
The horizontal position and size of a non-floating, block-level element is determined by seven properties:
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
The sum of these seven properties is always equal to the 'width' of the parent element.
So yes, you've been absent-minded! Block-level elements (such as div) automatically fill the width of their parent unless they've been told not to by float.
<div>s are block-level elements, meaning they will automatically fill the horizontal space of their parent. Unlike inline elements such as <span>, which only take up the space required by their content.
DIVS are by default 100% of their parent element. So just set the width you need.
Also note that DIVs that have a width greater than their parent will by default also be completely visible unless you set the parent element to overflow:hidden.
Is it possible to have 100% height but have the div fill out the entire page only.
So if i put 100% height on a div, it should extend the div all the way down to the end of the page but not extend anymore to bring any scroll bars. Is that possible? I know height:100% takes the page's height and puts the div's height to that number but I don't want the div to actually have the height of that number, but only extend till end of page, no more than that.
Is it possible with 100% height or anything else?
I appreciate your help.
Thanks
you can use
<div style="top:0;bottom:0,left:0,right:0;"></div>
or using jquery:
$("#mydiv").height($(window).height());
Without padding or border, if you declare the html, body, and div 100%, it will extend to the size of the browser window.
If you want to use padding and border, consider using the CSS3 property box-sizing: border-box;
Demo
Update:
Using pseudo-elements (you could use an empty div):
.top{height:100px; width:100%; position:absolute; top:0; left:0;}
.rest{min-height:100%; background:lightblue; }
.rest:before{content:''; display:block; width:100%; height:100px;}
Demo
I dunno what's wrong with my css, but I can see only 50-60% of right border of left sidebar navigation. How to resize it to fit full container height?
Here is the image of sidebar navigation
And link http://www.smiths-heimann.az/?page=2
There is a huge padding-bottom in your container div which is 373px. I guess you have to recheck the design. A quick solution can be to reduce this padding to 354px.
You have a big mess with margins and paddings.
You should remove min-height on #wrap. Remove the negative margin-top on the #footer, the padding-bottom on the #container and just work on the padding-bottom of the .content
try setting you content div to "height:100%"
I have a layout with a body tag. Body tag as css width for 960px;
I would like have a DIV inside the body tag, and I need this div be 100% width of the browser windows.
Unfortunately at the moment I'm not able to get the result because the internal div inherit from the body.
My question; How to force a div to scale at 100% width of the current Browser windows even if inside a body tag?.
PS. I try !important on width attribute but does not work
Thanks
You cant in your case. Instead of width:960px for the body use wrapper.
<body>
<div class="wrapper">
my content goes here
</div>
<div>
my 100% width div goes here
</div>
</body>
.wrapper { width:960px; margin:0 auto; }
I think your layout background is 100%, but your layout width is 960px. If it is your problem, then take 1 pixel vertical background top to bottom..
use jquery to get the width of the window : $(window).width() and update the width of the div using jquery with something like : $("#theIDofDiv").css( "width", widthVar );
note that this is not standard and in a proper format and the code hasnt been tested but in theory if body doesnt have overflow:hidden, you should be able to get the result you want