Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have researched a bit and saw many examples about how developers use this technique to full screen a container and the most used are:
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
and
html, body{
height: 100%;
margin: 0;
}
.container {
min-height: 100%;
margin: 0;
}
These are the most used methods to extend a div in full screen when the container is the child of body.
If you ask me, the method using absolute position is not a very good idea because if you put other elements inside you can not relate to it because they have an absolute position.
The method using HTML and body 100% seems to be a little bit rudimentary.
So, what is the best way to extend a container?
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I can't seem to find the exact answer I'm looking for online, but the problem is that I'm not even sure what to look for.
When you enter the homepage, I want a div to be stuck to the bottom (for any device) and when you scroll. But I do not want it fixed so that it scrolls with the screen.
I'm sure this is some responsive trick that I'm overlooking, but I'd love some feedback. Thank you in advanced!
EDIT: I do not want the div to follow you upon scrolling. But I do want it to appear to the very bottom of the screen when you first view the site (no matter the platform you are using to view the site.)
Example is this site. The down arrow appears in the same spot for all devices, but does not scroll with the user: https://www.nabitablet.com/
You might be able to use an absolutely positioned container sized to the window, then absolutely position the item to the bottom of that. Depending on your page structure, this might not work.
body {
height: 5000px;
}
.container {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.item {
background-color: #f00;
bottom: 0;
height: 50px;
position: absolute;
width: 100%;
}
<div class="container">
<div class="item"></div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
How to stretch full height of a div using CSS?
I'm trying to stretch a div 100%. Applied min-height: 100%; but no result.
<div class="mydiv"></div>
.mydiv {
min-height: 100%;
}
In your css, try add this, it work for me :)
.divName{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background:red;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm looking for a way to give a div a background with a fixed width.
In particular I want the div to have a 5 pixel one-colored background (no percentages, no gradient) and the rest of the div being transparent. In this case I don't want to use a border!
enter link description hereYou can use a pseudo-element and then style that. Make it 5px wide and 100% height of the div to make sure it covers the whole lot.
See this fiddle.
.bg {
height: 100px;
}
.bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 5px;
background-color: blue;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I need to set the height of my webpage constant in any screen size.Is it possible.Please help.
My content is in a wrap div
<div id="wrap"></div>
Thanks
Well, what is that constant? More details would be helpful. But, have you tried setting the height?--for example.
html, body {
height: 200px;
}
#wrap {
height: 200px;
}
You can also try with positioning. This does not require you set the height of html and body as the first example does.
#wrap {
bottom: 0; /* change this */
left: 0;
position: absolute;
right: 0;
top: 0; /* and this to fit your requirements */
}
It is very possible to do what you want.
The problem that most developers encounter when trying to do this is that when setting the height of a div to 100% it actually flattens to 0px. This is because 100% of nothing is nothing.
Since the body and html tags are both parent of your div they need to be adjusted first.
What you need to do on your css:
html,body{
height: 100%;
width: 100%;
overflow: hidden;
}
#wrap{
height: 100%;
width: 100%;
overflow: auto;
}
its not possible to maintain constant height in different screen sizes
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am just wondering if there is any solution for a scrollable area (ie overflow: scroll) with the scrollbar hidden? I didn't find a solution while googling it so i ask here. It would be cool if this is possible with CSS. But if there is a solution with JS or php I'd still like to know.
By absolute positioning a container in an outer container that is relative positioned with hidden overflow you can hide the scrollbar of the inner container outside of the first.
So the scrollbar is still there, but you won't be able to see it.
#outer {
position: relative;
width: 200px;
height: 300px;
padding: 0;
margin: 0;
overflow: hidden;
}
#inner {
position: absolute;
left: 0;
top: 0;
right: -30px;
bottom: 0;
padding-right: 15px;
overflow-y: scroll;
}
JSFiddle:
http://jsfiddle.net/g6URf/