I need to make a div have a certain height, it has a repeating image in it and I want it to take up the entire screen no matter what the users screen resolution is. Height auto depends on the content so do I need to use javascript in order to achieve my goal? Or can I use something with a "clear:both;" property on it in order to always stretch the div to the bottom? I would really like to avoid javascript.
As long as the parent container (like body or html) has 100% height, then the div should also. So
html, body{
height:100%;
}
div{
height:100%;
width:100%;
border:1px solid red;
}
Example: http://jsfiddle.net/jasongennaro/Jm8Mt/
Of course, your div would have a class... example was just for show
Giving the div 100% height and width will make it take up the entire of the window.
#fullscreen {
height:100%;
width:100%;
}
Related
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
I am developing a configuration page for my plugin in WordPress. I created an <ul> element inside a <div> element and placed it on my config page. The problem is, whenever I apply margin-right and width:100% to that div it causes the scroll bar to appear, the width of the list exceeds the total width of the page. As you can see at the bottom of the screenshot.
Here are the only styles I am applying (LESS):
div#pworks-popular-posts-list {
display:block;
margin:20px;
width:100%;
ul {
width:100%;
margin:0;
background-color:white;
li {
display:block;
div {
display:inline-block;
}
}
}
}
This is the HTML structure pulled from Chrome Dev Tools:
Could you please help me with this? Thank you.
First of all you don't need width:100%; because a display:block; div will fill its parent's width by default. But if you want to specify it for some reason (or you plan on making it display:inline-block; or something) you can use calc() function like this: width:calc(100% - 20px);.
What's happening is that you are setting the div's width to be the body's width. After that you are moving it so it causes your div to go even further and that causes an overflow-X.
I wouldn't recommend setting a block element width to 100%. Block elements automatically have 100% width of their parents.
I would set a container div with a padding: 20px; instead.
Set max-width:100% instead width:100%.
It will reduce width according to padding.
How do we put a large image into a smaller div with h-align/v-align as centre. Image should not be visible outside of the div (kind of overflow:hidden). Also, div will change its size based on page size.
I took help from other question/answer and tried with div background and css - but it is aligning image to h-centre only.
jsFiddle - http://jsfiddle.net/yesprasoon/9tLcV/.
How to align both h-centre and v-centre? Also, there should not be any vertical scrollbar. It should work with any page size and (if possible) any image size. Possible with CSS only?
Not sure if your are OK with resizing the image but you could go with the background-size property
.imageContainer {
background-size:cover;
}
Here is my example: JSFIDDLE
Edit
After your comment I finally understood the problem. You can center the background-image vertically, that works, but but the vertical centering will not adapt when the height of the page changes dynamically. The reason is that your imageContainer div has a fixed height therefore its own height will not change with the page's height.
What you can do to remedy that is give your imageContainer a height of 100%. However you will also need to have the body/html to extend to 100% or your div will have no height in the absence of content, or be too short if you have little content.
JsFiddle doesn't deal well with body/html styles (maybe there's a trick I don't know) so I put my example on codepen.
HTML
<div class="imageContainer" style="background-image: url('http://www.taiwanholidays.com.au/util/image.jsp?l=791');"></div>
CSS
html,body {
width:100%;
height:100%;
margin:0
}
.imageContainer {
margin:0;
height:100%;
width:100%;
overflow:hidden;
background-position:center center;
background-repeat:no-repeat;
}
I have been having a heck of a time getting a background image to stretch on the screen to fit the screen so I have no decided to just add it as an image. Below is a image of what I am trying to accomplish. I have cleared all of my CSS and HTML for that section and looking to start from scratch again. Thanks so much for the help.
www.jobspark.ca
your parent container already fixed width by 960px. and if you change your container width it will affect your whole design. better try my below code. make position absolute your image and you can stretch
.image-block-outer-wrapper{
height:338px;
}
.image-block-wrapper{
position:absolute:
//align this div using margin
}
.image-block-wrapper img{
width:1200px;
//or increase original image width by photoshop and set width here whatever you want
}
If you wish to have the image stretched across the width of the page and are happy to have the image height scale proportionally try -
.image-block-wrapper {
width:100%;
display:block;
}
.image-block-wrapper img {
width:100%;
height:auto;
}
Please ensure that the "image-block-wrapper" element is not nested inside any other element which has a fixed width. Additionally the tag should not have width and height attributes specified.
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