Whats wrong with this?
CSS:
width:auto;
height:auto;
min-width:500px;
min-height:500px;
The width works and dynamically re-size to the window, but the height just gets set to the min-height.
JSFiddle DEMO
It has nothing to adjust to, you need to set
body,html{
height: 100%;
}
and change height to 100% instead of auto if you want it to take up the size
#div1 {
width:auto;
height:100%;
min-width:500px;
min-height:500px;
background-color:#F00;
}
Related
html, body { margin:0; padding:0;}
svg {top:0; left:0; height:100%; width:100% }
#b_txt{
position:absolute;
top: 500px;
left:300px;
}
This b_txt is just a input box in html.
My svg is appearing
that way
what can i do to fit?
If this case the ratio of height and width of your svg is fixed and you are trying to change the default height and width ratio which is not possible in your case.
If you put
svg{
top:0; left:0; height:100%; width:100%
}
It is setting height to 100% but ```width: 100%`` do not work, it automatically set width according to default svg ratio.
To fit the svg to screen change the default svg height and width according to your screen.
or
use only width: 100% but this will create height more than your screen.
I have a element (represented as aside) that I need to span the full height of the page. However, the height is appearing to be ineffective with "height 100%".
Here is the fiddle: http://jsfiddle.net/h18ctmfq/
aside{
width:300px;
float:left;
background-color:#808080;
height:100%;
}
Add this
html {
height: 100%;
}
JSiddle Demo
In my css, I have the height of the parent set to 75px, and the height of the child set to 100%, and it displays correctly. However, when I change the parent's height attribute to a min-height of 75px instead, the child shrinks to the height of the text it contains, but the parent's height stays 75px. Why doesn't the child stay 75px?
#parent{
height:75px;
background-color:navy;
clear:left;
}
#child{
width:300px;
height:100%;
background-color:aqua;
float:left;
}
Here, the child is 75px like it is supposed to be.
#parent{
min-height:75px;
background-color:navy;
clear:left;
}
#child{
width:300px;
height:100%;
background-color:aqua;
float:left;
}
The child is only 21px high now.
I believe this has been a longstanding bug (or 'feature') in CSS. See https://stackoverflow.com/a/3808701/1608085
In short, you can use
min-height: inherit;
in the child to correctly inherit the min-height property from the parent.
my template is as follows:
.layout{
height:100%;
width: 70%;
position: fixed;
}
.header{
height:20%;
width: 100%;
}
.content{
height:60%;
width: 100%;
}
.footer{
height:20%;
width: 100%;
}
the content has a default height 60%, and i want if the content is filled with data to get auto stretch for (height/width) when necessary, and a scroll appears for whole page, how to do so ?
i tried the solution for giving the parent postion:relative; but that will ignore the default height and minimize the content in case of the content has small data, and i want to keep default height in case of small data.
As indicated by Motoxer4533, use the min-height property: http://jsfiddle.net/uef7v/
just set the .content height with min-height property:
.content{
min-height:60%;
}
that will set the minimum height of .content to 60% and if the data of the content take up more that 60% it will stretch automatically.
but you need to drop the position:fixed on layout. you don't need that if your content is dynamic.
A IE Resizing problem!? The code is pretty simple: I've got a div and I want a text-box that's 100% of the DIV. It must show the red line of the div (if I use height:100%, width:100% it eats away my border :-( ).
Html:
<div>
<textarea></textarea>
</div>
Css:
div{
width:500px;
height:500px;
border:solid 1px red;
padding:1px;
position:absolute;
top:100px;
}
textarea{
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
}
I hope you guys have a clue. The DTD in the example is HTML Strict. Code example: http://jsfiddle.net/QJYuz/
I'm trying to find the reason why as well. Please specify any links to blogs / specifications why this problem occurs.
IE doesn't support setting both left and right (nor top and bottom) at the same time. Instead try setting width and height to 100% (but you'll need to remove padding and border in that case):
textarea{
position:absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
border: none;
padding: 0;
}
Try doing
textarea {
height: 100%;
width: 100%;
}
instead. While some browsers do honor setting the top/bottom/left/right all at the same time, it's not standard.
One method that looks good in both: http://jsfiddle.net/QJYuz/6/
My change to textarea:
textarea{
position:absolute;
top:0px;
left:0px;
width: 99%;
height: 98%;
overflow: auto;
}
I just set the width and height to 99% and 98%. It looks good in both and saves the border. I also put in the overflow: auto to get rid if IE8's ugly grayed-out scrollbar, until you actually need a scrollbar.