You can see an example here:
http://users.telenet.be/prullen/portfolio_test.html
I have set a padding of 100px (all directions) to the portfolio_item class (3 items on that page). The top, bottom, and left paddings are applied. But the right padding doesn't seem to work; the text extends beyond the boundary of the div.
.portfolio_item {
width: 100%;
clear: both;
display: inline-block;
padding: 100px;
}
I have tried changing the div to a float:left instead of display:inline-block but that didn't help.
Ideas are appreciated.
Thank you,
Wesley
Applying box-sizing: border-box; on your .portfolio_item should fix the issue. You'll have to include some specific vendor prefixes for this to work on all modern browsers:
.portfolio_item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Little demo: little link.
More than one parent element (.out anb .in) has overflow: hidden; applied. The overall container is set to a width of 800 pixel and thus the right side of the content is hidden. The padding itself works – you just don't see it in your current setup.
<div style="width:800px; border:2px dashed red;">
<div class="out">
<div class="in">
<!-- … -->
You set the width of the inside to 100%, but with the padding the width is actually 100% + 200px. I would recommend changing
width: 100%;
To
width: 600px;
Or changing the padding to a percent like:
width: 80%;
padding: 10%;
Instead of applying the padding to the div, target the text specifically. Place the text in a 'p' tag and call it in the CSS.
.portfolio_item p{
padding: 100px;
}
you can give like this,
.portfolio_item {
clear: both;
display: inline-block;
padding: 100px;
width: 87%;
}
Related
Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much smaller in height than the body height which is set to 100%.
I have set the padding and margins to 0 for all elements except the #container. Note that I have deliberately omitted absolute positioning on the #container div. In this case how is the browser calculating the height of the body and how is the margin affecting it?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
padding:10px;
margin:50px;
border:1px solid black;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id='container'>
</div>
</body>
</html>
Example also on JSFiddle
If you paint the backgrounds of html and body (giving each its own color), you'll quickly notice that body is being shifted down along with #container, and #container itself isn't offset from the top of body at all. This is a side effect of margin collapse, which I cover in detail here (although that answer describes a slightly different setup).
It's this behavior that's causing the scrollbar to appear, since you've declared body to have 100% the height of html. Note that the actual height of body is unaffected, as margins are never included in height calculations.
Based upon #BoltClock♦'s answer, I fixed it by zeroing the margin...
so
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
works where id "st-full-pg" is assigned to a panel div (which further contained panel-heading and panel-body)
A bit late, but maybe it helps someone.
Adding float: left; to #container removes the scrollbar, as W3C says:
•Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
This worked for me
adding float:left; is nice, but will interfere with central horizontal positioning using margin:auto;
if you know how big your margin is, you can account for that in your height percentage using calc:
height: calc(100% - 50px);
browser support is good, but only IE11+
https://caniuse.com/#feat=calc
/*removes default margin & padding*/
html, body{
padding: 0px !important;
margin: 0px !important;
}
/*sets body height to max; and allows scrollbar as page content grows*/
body{
min-height: 100vh;
}
I have found a solution: add padding: 1px 0; to body prevents vertical scrollbars to appear
For those who are coming here for an easier to understand answer that even includes code samples, this answer (copied from here) is for you.
No JavaScript or definite pixel values (such as 100px) are required, just, pure CSS and percentages.
If your div is just sitting there on its own, height: 50% will mean 50% the height of the body. Normally, the height of the body is zero without any visible content, so 50% of that is just, well, zero.
This is the solution (based on this) (uncomment the background lines to get a visualisation of the padding):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html
{
height: 100%;
/* background: green; */
}
body
{
/*
100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
This prevents an unnecessary vertical scrollbar from appearing.
*/
height: calc(100% - 1em);
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
The above was written so that there would still be the usual padding. You could set the dimensions of the red div to 100% and still see padding on each side/end. If you don't want this padding, use this (although it doesn't look nice, I recommend you stick with the first example):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html, body
{
height: 100%;
}
/* You can uncomment it but you wouldn't be able to see it anyway. */
/*
html
{
background: green;
}
*/
body
{
margin: 0;
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
I saw this problem fixed before where you put all the contents of body in a div called wrap. Wrap's style should be set to position: relative; min-height: 100%;. To position #container div 50px from the top and left put a div inside wrap with a padding set to 50px. Margins will not work with wrap and the div we just made, but they will work in #container and everything inside it.
here's my fix on jsfiddle.
you can add non-breaking space into the body tag.
<body> <othertags>...</body>
html, body {
height: 100%;
overflow: hidden;
}
If you want to remove the body scrolling add the following style:
body {
height: 100%;
overflow: hidden;
}
Inspired by #BoltClock, I tried this and it worked, even when zoom out and in.
Browser: Chrome 51
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
position: relative;
top: -20px;
}
I guess body was shifted down 20px.
It works for me:
html,
body {
height: 100%;
height: -webkit-fill-available; // Chrome
}
// Firefox
#-moz-document url-prefix() {
body {
box-sizing: border-box;
margin: 0;
padding: 1px;
}
}
Add overflow: hidden; to html and body.
html, body {
height: 100%;
overflow: hidden;
}
I found a quick solution: try set height to 99.99% instead of 100%
I'd like to know what are Bootstrap 3 effects on height, when using percentages values.
Here's a simple html:
<body>
<div class="content">
<p>This is a div! </p>
</div>
</body>
and css:
body {
padding-top: 100px;
height: 400px;
background-color: lightblue;
border: 5px solid green;
}
.content {
border: 5px solid red;
height: 100%;
}
Without bootstrap, this is the result.
With bootstrap, the result changes to this instead.
So, here's my guess:
Without using bootstrap, height: 100% will look up to the parent of .content and look for its height. So in this case, .content will end with height: 400px. And since there's a 100px padding-top in body, body will have to grow 100px larger, ending with 500px, in order to match .content.
With bootstrap, height: 100% will try to fill the parent, instead of looking at its height, so since there's a 100px padding-top, .content will end with height: 300px and body remain at 400px height.
Is this correct?
How would I be able to replicate what bootstrap does, without using bootstrap?
Thanks in advance! ^-^
The size you see with Bootstrap is because it uses box-sizing: border-box, instead of the default value of content-box..
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
So, if don't want to use Bootstrap, but have the same sizing, just add the CSS to set the box-sizing to border-box.
Codeply Demo
When I set the padding size for input field it automatically changed the size. It becomes bigger.
.container{
width: 150px;
}
.item label{
display: block;
width: 100%;
margin-bottom: 10px;
}
.from-item{
width: 100%;
}
input[type="text"]{
width: 100%;
padding: 5px;
}
JSFfiddle
You should think about putting this in your CSS:
* { box-sizing: border-box }
This alters the box model such that padding will not add to the size that an element occupies on the screen. It is, to my mind and the mind of many others, a much better model to work with:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
General info on the box model: http://css-tricks.com/the-css-box-model/
You can use box-sizing:border-box to solve your problem, but it is a css3 property. Thus incompatible with old browsers.
Another way to achive this is put a wrapper div around input & give padding to it.
<div class="ibox"><input type="text" class="from-item"></div>
.ibox{
padding: 5px;
}
input[type="text"]{
width: 100%;
}
Here is Demo link http://jsfiddle.net/aq8mP/1/
I have three nested DIV elements like this:
<div id="outer">
<div id="innerA">
<div id="innerB">
This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
</div>
</div>
</div>
#innerA has a height of 100% which makes it as big as #outer. #innerB's height is left to be auto so it gets as high as its contents. Now when i set #innerB to have margin-top: 10px for example i would expect that #innerB will get a margin in relation to #innerA. What happens instead is that #innerA gets this margin in relation to #outer.
How is this possible? It seems like this has nothing to do with box-sizing at least its not fixable this way.
Here's the CSS:
#outer {
width: 500px;
height: 300px;
background: yellow;
overflow: auto;
}
#innerA {
width: 100%;
height: 100%;
background: green;
}
#innerB {
margin-top: 10px;
background: blue;
}
and the fiddle:
http://jsfiddle.net/7e2H5/
(Here i would expect that the green DIV fits the yellow one, and that there are 10px of the green one visible above the blue DIV).
Seems like it's a "Margin collapsing" problem. Check the DEMO
I've added padding: 1px 0;
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
Just found this: margin-top in a nested div
This is interesting but I wouldn't say that adding padding is a more appropriate answer.
#innerA {
width: 100%;
height: 100%;
background: green;
display: inline-block;
}
Here's a demo on JSFiddle.
I hope this helps!
I would replace #innerb margin with #innera padding
According to the Mozilla link provided by Chris, adding floats also prevents margins from collapsing:
Add float: left; to #innerA as shown in this fiddle:
http://jsfiddle.net/7e2H5/10/
See: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
I have a page with a variable-height header, content area, and footer. I want the content area to always fill the viewport, and grow vertically to fit content as necessary. I've found lots of examples of doing this with fixed-height headers, but none where the height is unknown.
Any solution needs to work in IE 6, 7 and 8, Firefox 3.x and Safari 4. Can this be done with pure CSS? Do I have to give in and resort to table-based layout?
EDIT:
An additional requirement is that I can place elements inside the content area and get them to expand to the full height of the content area (be it viewport height - header height - footer height or larger than that). Some of the content we want to display has "header" and "footer" sections of their own, so what I'm really looking for is a nestable solution.
Ok so the min-height CSS property doesn't work :)
I played around with an actual HTML file now and I believe I found a way.
.header-footer
{
height: 10%;
background-color: lightYellow;
display: table;
width: 100%;
}
.container
{
margin-left: auto;
margin-right: auto;
height: 80%;
width: 100%;
display: table;
}
.inner
{
background-color: lightPink;
height: 100%;
}
We use the display: table property to make sure each <div> sits nicely under and over the other ones.
NOTE: You have to set a height property for each of the elements on the page. It doesn't have to be as large as 10% that I chose, but at least something. Once the content is inserted into the element that is larger than the height value it should expand.
I've created two seperate HTML pages for you to examine to see if this suits you:
Content not larger than the viewport
Content larger than viewport
Hopefully this is what you're looking for.
Thanks
if you want the header to change size, use a relative height. The content will already fill the viewport vertically.
You can try using the min-height CSS property on the header, content and footer.
e.g.
.header-footer
{
min-height: 20%;
}
.content
{
min-height: 80%;
}
Make sure that you set both <html> and <body> tags to have a min-height: 100% that way you can fill up the entire viewport.
This should allow for the page to expand as needed but stay at a minimum of 100%.
Thanks
I spent a day experimenting with this option and hit so many odd dead-ends that my professional advice is now this:
You designed it wrong.
Skip the variable height header entirely. It's a dumb idea anyway. I did. Worked great for me. Now I am the proud owner of a significantly simpler DOM cobweb and no hurdles that lead me to stackoverflow.
Please see this fiddle: http://jsfiddle.net/qH6K3/
<div id="a">
<div id="b1">BOX1</div>
<div id="b2">BOX2</div>
</div>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html,body{height:100%}
#b1 {
background-color: red;
height: 45px;
width:100%;
}
#b2 {
background: blue;
height: 100%;
width: 100%;
}
#a { height: 100%; padding-bottom: 45px; }
Please try this for CSS: http://jsfiddle.net/K64Mm/6/
Variable height, content 100% height (supports even iframe 100% height), no superfluous scrollbars, scrollable on touch devices.
<div class="wrapper">
<div class="top topBar">
</div>
<div class="content">
<iframe scrolling="yes" src="http://www.zeffirino.com"></iframe>
</div>
</div>
html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; }
.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.top { height: 45px; background-color: red; }
.content { height: 100%; width: 100%; overflow: auto !important; }
.content iframe { display: block; border: none; width: 100%; height: 100%; }