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
Related
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
On this template: GYM
If I add add more text under the welcome title, the form is lowered down and then disappears (class .home has overflow: hidden).
If I make it visible then will be over the section under it. What I want is the div's height to be modified depending on the text that I add, to show all the content and then start the other section (w/o a scroll for the div -> overflow: scroll)
Thanks!
Make the form position:relative; and the carousel position:absolute; (with extra positioning).
This will make sure the height will adjust, but still allow the carousel to flow in the background.
Edit (this is what I used):
.home form {
background-color: rgba(0,0,0,0.3);
height: 100%;
padding-top: 150px;
position: relative;
width: 100%;
z-index: 90;
}
.carousel {
position: absolute;
top: 90px;
left: 0;
width: 100%;
}
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 7 years ago.
Improve this question
I have a div that is called 'signup_div' that basically houses 5 input textbooks for the user to input the data. I have the div positioned absolute, with the body of the html page being position relative, so basically the body is the container div. I can't seem to make the width of the signup div 20% of the page, even when i did it with the input types.
Here is my code:
body {
width: 100%;
height: 100%;
min-width: 1200px;
min-height: 100vh;
position: relative;
margin: 0 auto;
}
#signup_div {
position: absolute;
left: 4%;
top: 7%;
width: 20%;
min-height: 580px;
height: 85%;
min-width: 470px;
background-color: #EBEBEB;
border-radius: 3px;
}
All of the inputs are positioned relative and have heights and width determined by percentages. What am i doing wrong?
The CSS for your signup_div includes a min-width: 470px; property which is setting the width of your signup_div until such time as 20% is larger than that.
Be careful mixing percentage and pixel widths, there be dragons.
Also, checkout http://jsfiddle.net/ for mocking up examples when you post here. It helps you to isolate the problem, and it helps us to answer your question.
The problem is that you are using both width and min-width values. If you remove the min-width rule, the width with percentage will work.
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
Image is not getting fully responsive withimg-responsive class in Bootstrap.
Below is the css code used.
img {
max-width: 100%;
}
In your custom.css-- you have only max-width: 100%;, add this one to your banner width: 100%;
img {
max-width: 100%;
width: 100%; <-- added
}
Add following css
.banner_image_Div img {
width: 100%;
}
Apply this css on your IMG
.banner_image_Div img {
display: block;
width: 100%;
}
try adding this to your css:
.banner_image_Div img { width: 100%; }
You can try in css property of image balise to set :
width: 100%;
Without your css, it's a bit hard to find why.
Try to edit your image. increase some some size of it and then give it 100% width when placing inside banner_image_Div. your problem will be solved. this time your image has maximum size that is not more than your div size .
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
As per my knowledge, Absolute positioned element and floated element are removed from the normal flow of html (correct me if i am wrong).
Here's my jsFiddle
Here's my code:
<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>
my css:
.content-area {
position: relative;
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
position:absolute;
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
position: absolute;
right: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}
when i write anything inside my main-area why does the right-sidebar slides to down.
Add a top property to the side bar
.right-sidebar {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}
When position absolute is specified you are expected to position the element, meaning you must set its top, bottom, left and right properties to the values you desire. If one of these properties is not set the browser positions them, since they will be set to auto.
As they have told you, put top:0 to fix it.
Ok, the reason:
Check this link: http://dev.w3.org/csswg/css-position/#abs-non-replaced-height
The section you are looking for is the 2nd rule: (emphasis added by me)
If ‘top’ and ‘bottom’ are ‘auto’ and ‘height’ is not ‘auto’, then set
‘top’ to the static position, then solve for ‘bottom’.
And that is the reason. Remember, top defaults to auto not to 0.
Add top:0; to your right bar. It should not longer push down after that.