I have issues with a div that has to stay 100% of window height. Once I place another div inside of it that exceeds screen size, parent div doesn't stretch after its child. Here is my code:
<html>
<body>
<div class="mainframe">
<div class="screencontainer">
<div class="mainscreen"></div>
</div>
</div>
</body>
</html>
And here is css:
html,body {
background:white;
height:100%;
margin: 0px 0px;
background-attachment: fixed;
}
.mainframe{
background:green;
width:100%;
position:absolute;
display:block;
margin:0 auto;
height:100%;
overflow:none;
}
.screencontainer{
background:red;
position:relative;
display:block;
overflow:none;
width:60%;
left:250px;
}
.mainscreen{
position:absolute;
width:100%;
height:1000px;
top:100px;
left:0px;
background: radial-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.5));
}
So .mainframe is 100% of window size only if I remove .screencontainer with all its content. But once I have it, because its child .mainscreen has 1000px height, mainframe breaks in the middle of a page.
Here is jsfiddle:
https://jsfiddle.net/u4oL7t80/
Change the overflow setting of the .mainframe from none (which is an illegitimate value) to scroll.
jsFiddle Demo
That way the container itself (.mainframe) will not stretch, but have its own scrollbar.
You can also set overflow-y instead, to allow only a vertical scrollbar.
Related
Let's say I have an image of unknown resolution. I want to center it horizontally, even if the window is narrower than the picture, and push the bottom of the window to fit the height of this picture.
How can I achieve that with css only? (no javascript)
Obviously the picture will be in an < img > tag since this is the only way to push the bottom. Align it center is easy, the hard part is to keep it centered just like a background-position:center top because when simply centering this < img > tag it will hit the left border of the window instead of overflowing hidden and staying centered.
Thanks!
If you want to do this with the img tag you can use the following two codes:
object-fit:cover;
object-position:50% 50%;
These are pretty much the same as background-size and background-position.
For example how this would be done in code:
html,body {
width: 100%;
height: 100%
}
img {
width: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
object-position: 50% 50%;
float:left;
}
div {
width: 100%;
height: 100%;
background: #222;
display:flex;
color:#fff;
align-items:center;
justify-content:center;
}
<img src="https://www.rafaeldejongh.com/wp-content/uploads/2016/12/GlitchSkull1.jpg" alt="Rafael De Jongh - Glitch Skull"/>
<div>
<p>Other Content</p>
</div>
You can view this as well on JSFiddle
And in case you do want to have a full fluid background image that is set to 100% of the viewports width and height, you could also do this via the following code:
html,body {
width:100%;
height:100%
}
#img {
width:100%;
height:100%;
max-width:100%;
max-height:100%;
background-image:url(https://www.rafaeldejongh.com/wp-content/uploads/2016/12/GlitchSkull1.jpg);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
float:left;
display:inline-block;
}
#content {
width:100%;
height:100%;
background: #222;
display:flex;
color:#fff;
align-items:center;
justify-content:center;
}
<div id="img"></div>
<div id="content"><p>Other Content</p></div>
Also on JSFiddle
Feel free to ask if you have any further questions!
Voila:
https://jsfiddle.net/gwja6f6z/
HTML:
<div id=main>
<div id=imgwrp>
<img src="https://upload.wikimedia.org/wikipedia/commons/9/94/Ingres%2C_Self-portrait.jpg" border=0>
</div>
</div>
<p>
The picture stays center and does not hit the borders of the window when window is too narrow, and this text is pushed without knowning the height of the picture.
</p>
CSS:
html, body {
width:100%;
height:100%;
text-align:center;
overflow-x:hidden;
}
#main {
position:relative;
left:50%; /* This div is just a 0px width line in middle of window */
width:0;
overflow-x:visible;
text-align:center;
}
#imgwrp {
display:inline-block; /* Image container width is same as image itself */
position:relative;
margin:0 auto 0 auto;
}
#imgwrp img {
display:block;
position:relative;
margin-left:-50%; /* The image is pushed left by 50% its container width */
}
I have a div with "max-width" set to 400px, but when I reduce the size of the windows, it doesn't get smaller to adapt to the new size.
You can see an example here: https://jsfiddle.net/d0d4jx6L/
Here's the HTML:
<div class="menu">
fixed menu
</div>
<div class="content">
content (displayed on the right of the menu)
</div>
And here's the css:
.menu {
width:250px;
position:fixed;
}
.content {
position:relative;
left:250px;
max-width:400px; /* not working */
}
Thanks!
Use margin-left instead of left.
.content {
background:blue;
position:relative;
margin-left:250px; /*use instead of left*/
max-width:400px;
}
Because you should set to position:absolute the .content. When you use left in css, the element should be absolute or fixe.
.content {
position:absolute;
left:250px;
max-width:400px; /* not working */
}
Here it works
https://jsfiddle.net/d0d4jx6L/2/
I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).
(See Example for a visual)
The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.
And the Following CSS results in a gap between the content and the footer.
html,body{
margin:0;
padding:0;
height:100%;
background:yellow;
}
.wrap{
min-height:100%;
position:relative;
}
header{
background:blue;
padding:10px;
}
#content{
height:100%;
width: 400px;
margin:0 auto;
background:orange;
padding:30px;
}
footer{
background:blue;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?
Thank you!
FIDDLE: http://jsfiddle.net/3R6TZ/2/
Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/
CSS
html, body {
height: 100%;
margin:0;
}
body {
background:yellow;
}
#wrapper {
position: relative;
min-height: 100%;
vertical-align:bottom;
margin:0 auto;
height:100%;
}
#header {
width: 100%;
height: 150px;
background:blue;
position:absolute;
left:0;
top:0;
}
#content {
background:pink;
width:400px;
margin:0 auto -30px;
min-height:100%;
height:auto !important;
height:100%;
}
#content-spacer-top {
height:150px;
}
#content-spacer-bottom {
height:30px;
}
#divFooter {
width:100%;
height: 30px;
background:blue;
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-spacer-top"></div>
<div id="content-inner">
**Content Goes Here**
</div>
<div id="content-spacer-bottom"></div>
</div>
<div id="divFooter">Footer</div>
</div>
UPDATE
The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.
In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.
EDIT
Added a fix and tested down to IE7
UPDATE 2
Alternate method using :before and :after pseudo-elements instead of the spacer divs:
http://jsfiddle.net/gBr58/1/
Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean
UPDATE 3 (Sorry for so many updates)
Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...
I think you need position: fixed on the footer:
footer {
width: 100%;
height: 30px;
position:fixed;
bottom:0;
}
I have the following issue with css and was wondering whether there is a way to solve it by setting an absolute height value. The code I have is as follows,
<style type="text/css" media="screen">
html { height:100%; }
body { background: black; height:100%; }
#menud {
position:absolute;
padding:1em;
height:300px;
background-color:#eaeaea;
width:184px;
}
#menue {
position:absolute;
margin-top:300px;
padding:1em;
height:900px;
width:184px;
background-color:red;
}
#data {
position:absolute;
margin-top:0px;
margin-left: 184px;
width:630px;
height:600px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
}
#ad {
position:absolute;
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
#content {
width:1000px;
background-color:white;
height:100%;
}
#info {
margin-top:0px;
width:1000px;
}
</style>
<html>
<body>
<div id='content'>
<div id='info'>
<div id='menua'>test</div>
<div id='menub'>test</div>
<div id='data'>test</div>
<div id='ad'>test</div>
</div>
</div>
</body>
</html>
I have set the height property to 100% but this does not cover the whole background white as one would expect it to. Any help on this would be appreciated.
Thanx.
Setting the height to 100% means 100% of the current viewport height. If your page is longer than the browser viewport, the div is too short. Use auto height to let the height get calculated correctly for you.
Set the height of content back to auto (remove height: 100%):
#content {
width:1000px;
background-color:white;
}
and remove the position: absolute from your ad (or replace with position: relative), so that the ad's height is respected when calculating the parent's (#content's) height:
#ad {
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
now your content is as long as you would expect.
100% height is relative to the container. To cover the whole background, you will have to use javascript. On page load you set the height to the window height.
You can use jQuery, to do this: in that case
$("#content").css('height', $(window).height());
You might have to remove paddings and margins from the body, like body { margin: 0; padding: 0; }, for the relative-positioned container div to cover the whole height.
My basic layout for my page is:
<body>
<div id="headWrap"></div>
<div id="contentWrap"></div>
</body>
headWrap has all my menu items and search bar. contentWrap holds the content of each page. Both have a width of 100%. headWrap uses a repeating background images contentWrap uses a background image much larger than the screen size.
Somehow, when the page is rendered, the horizontal scroll bar is visible. Even though it appears that all content is on the page. If I scroll to the side, the background image does not continue, and the scrolled part of the screen is white. If I stretch the window wide enough the background image takes up the entire page.
How can I find out what is causing the horizontal scroll bar, and why does the background show up when I stretch the window, but not when I scroll.
#headWrap{
position:relative;
width:auto;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:auto;
height:1005;
margin:0 0 0 0;
padding:0 0 0;
float:left;
background:url(images/contentBg.jpg) repeat-x;
}
Use following CSS styles: width and overflow:hidden;
html{
margin: 3px 1px;
}
*+html{
overflow:auto;
}
body{
margin:0;
width:100%;
min-width:800px;
position:relative;
}
#headWrap{
position:relative;
width:100%;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:100%;
margin:0;
padding:0;
float: left;
background:url(images/contentBg.jpg) repeat-x;
}
Maybe you have some default margins that are added in addition to the 100% width? I suggest using a reset css, for instance YUI 2: Reset CSS.
You're looking to set the overflow CSS property.