I have a content div. I want it to be atleast 90% of the screen.
I currently have:
min-height: 400px;
height: auto !important;
height: 400px;
in my #content div's css.
Changing to 90% did not work.
Is there some way to do this?
Essentially it will always run 90% down the screen unless something makes it bigger than 90%.
Thanks
You need to set html and body to fill 100% of the height, look at this fiddle: http://jsfiddle.net/promatik/KhCb6/
html, body {
height: 100%;
}
#myDiv {
min-height: 10px;
height: 90%;
background-color: #CCC;
margin: 1px;
}
Your height:auto !important is killing it. Remove it. Also, I would suggest using this method:
height:90%;
min-height:400px;
Depends how you're going to have the content, you can fake this by letting the overflowed content have the same background. For example:
#mainDiv {
min-height: 10px;
height: 90%;
background-color: #ddd;
}
#mainDiv p {
background-color: #ddd;
}
This way, your overflowed content would "look like it's expanding" with the div. Not ideal, but this gets what you're trying to achieve.
you need to set min-height of Div ie min-height:90%;
#mainDiv {
min-height: 90%;
background-color: #ddd;
}
Related
So, I am working on something and I am trying to create an image tag that is inside another div. The problem is, I write
.container {
padding: 0;
margin: 0;
}
.container img {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
<div class='container'>
<img src='https://www.clarkson.edu/_site_support/background_image_banks/images/tor_images/studcnt_4128800003.jpg' alt='A problem occured'>
</div>
But there is still some room before the edge. I also tried to put padding to 0 and margins to 0 but still, nothing.
Give body margin as 0px;
body {
margin: 0px;
}
Use a reset file or structure in css to set the values to a defined default and not let browsers get that. One of the reset files I've used is from here http://meyerweb.com/eric/tools/css/reset/ . The body in this case has a margin of 8px and since there is not box-sizing defined it affects the widths. Try that.
Try this code
body,html{
margin:0px;
padding:0px;
}
Set the float attribute to get rid of the extra room:
div img { float: left }
But about the size of the image you need to have in mind that if the div's width/height is set as percentage, the inner element's width/height can not be set in percentage.
If you'd like to set the image width/height in percentage, you need to specify the dimensions of the div in pixels.
E.g.
This works:
div {
width: 600px;
height: 400px;
}
div img {
width: 100%;
height: 100%;
}
But this does not work:
div {
width: 100%;
height: 100%;
}
div img {
width: 100%;
height: 100%;
}
Totally, what you need to handle both parts of your question is something like this:
div {
width: 100%;
height: 100%;
}
img {
float: left; /* or right, whatever you'd rather */
display: block;
}
Though, for a better suggestion, information about the container of the div's needed.
I have a very simple website I'm working on for practice and having a problem with the background-color for my container div. I'm sure it's a pretty simple fix but I want to understand why it didn't work. Here is my CSS:
body {
margin: 0px;
padding:0px;
height: 100%;
background-color: black;
}
#Container {
width: 98%;
height: 100%;
background-color: grey;
}
For some reason the only way I've managed to get it working is when I include html in my body styling, is there a reason for this?
body, html {
margin: 0px;
padding:0px;
height: 100%;
background-color: black;
}
Thanks
While the problem is that an element, other than the <html> root element, needs a parent with a specified width (in order to calculate its own relative height), you can avoid the problem using units relative to the viewport, such as vh (1vh is equal to one-percent of the height of the view-port, and so is pretty much a direct drop-in replacement for a %-based height), such as:
body {
margin: 0px;
padding:0px;
height: 100vh;
background-color: black;
}
#Container {
width: 98%;
height: 100%;
background-color: grey;
}
JS Fiddle demo.
The problem with that approach, of course, is that it restricts the content of the #Container from growing and allowing the <body> to scroll (this may be by-design, of course), but you could instead use min-height to obviate the problem, and allow the elements to grow:
html {
padding: 0;
margin: 0;
}
body {
margin: 0px;
padding:0px;
min-height: 100vh;
background-color: black;
}
#Container {
width: 98%;
min-height: 100vh;
background-color: grey;
}
#expansion {
height: 3000px;
width: 2em;
background-color: #f00;
}
JS Fiddle demo.
(Note that in the above demo I'm using another element to force the #Container to expand, that's purely for demonstration purposes, and is not required by this approach.)
References:
CSS relative lengths.
Can I use: viewport units (vw, vh, vmin, vmax).
Make sure that you are calling your selector correctly. This is case sensitive.
Container Vs container (Small c and Capital C) and also ( # Vs .) Class for dot(.) And ID for Hash (#)
I have a div with percentages as values, and an image i need to fit in it.
The width should be resized to fit the div, whereas the height of the image that exceeds the div should be hidden.
(a clearer visual explanation)
this is what I have so far(edit: pasted the wrong link, my bad)
the html:
<div class="wrap">
<img class="imgofcrap" src="http://physictourism.com/wp-content/uploads/2011/10/Grand-Canyon-National-Park-Arizona.jpg" />
</div>
the css:
div.wrap {
width: 20%;
height: 5%;
overflow:hidden;
border: 2px solid black; }
img.imgofcrap{
width: 100%;
height: auto; }
I thing so you are looking for a responsive image.
so please cheack below JSfiddle URL
img.imgofcrap{
max-width:100%;
height: auto;
display:block;
}
JSFiddle Link
Pretty simple and you was close.
So we just want to use the width of the img so we set that as 100%. As the parent has a width it will use that. Now the parent you have set as a percentage height. But the div has no parent with an height. So we set it using:
html, body {
height: 100%;
}
So now we have:
html, body {
height: 100%;
}
div.wrap {
width: 20%;
height: 6%;
overflow:hidden;
border: 2px solid black;
}
img.imgofcrap {
width: 100%;
}
Demo Here
Change to this:
img.imgofcrap{
width: 100%;
height: auto;
}
fiddle
Also take a look here The difference between width:auto and width:100%
Your looking for a background cover solution: if you only have to use the image like you showed there and only in latest browsers i would go for
<div class="wrap"></div>
div.wrap {
width: 20%;
height: 5%;
overflow:hidden;
border: 2px solid black;
background: transparent url("http://physictourism.com/wp-content/uploads/2011/10/Grand-Canyon-National-Park-Arizona.jpg") center;
background-size: cover;
}
Fiddle here
if you need ie7+ support i made a small project which covers that - feel free to use it or extended it to your needs:
https://github.com/sp90/backgroundCover
I have div (#child) which won't expand to the full height of it's parent (#parent). I've set the height for both html and body. It works if I set the parent's height as 100%, but I want the parent to have a minimum height, and the child to expand to the parent's full height.
HTML:
<html>
<body>
<div id="parent">
<div id="child">
<p>This area should be have the same height as it's parent.</p>
</div>
</div>
</body>
</html>
CSS:
html, body, header, h1, p { margin: 0; padding: 0; }
html { background-color: #DDD; height: 100%; }
body { background-color: #DAA; height: 100%; }
#parent {
min-height: 70%;
height: auto !important;
height: 70%;
background-color: #AAD;
}
#child {
height: 100%; /* why isn't this working ? */
width: 80%;
margin: auto;
background-color: #ADA;
}
JSFiddle: http://jsfiddle.net/nxVNX/11/
It works when you remove the !important; property. Maybe that's the problem?
I tried several other methods, but they didn't work, so the solution above could be the only one, I guess.
height: auto !important;
Don't ever use !important, because it cannot be overriden, work with it is harmfull.
It didn't work because it always used height: auto; not height: 70%;
A rule that has the !important property will always be applied no
matter where that rule appears in the CSS document.
So i recommend to you remove this line and it will works.
Have look for more information about What does !important mean in CSS?.
Am not sure why this is not working , but this will work
#parent {
min-height: 70%;
height: 100% !important;
height: 100%;
background-color: #AAD;
}
i am kind of new to designing stuff which is why i want to learn a bit about it..
I am having an issue with my website, what css can I use to make a Div acting as a wraper grow in terms of height as the content grows? My content is being hidden underneath the footer... as it grows
Thank you
css
.wrapper
{
width :1200px;
height: 1000px;
margin-left: auto;
margin-right: auto;
overflow :hidden;
background-color: white;
}
Change this:
.wrapper
{
width :1200px;
height: 1000px;
margin-left: auto;
margin-right: auto;
overflow :hidden;
background-color: white;
}
to this:
Change this:
.wrapper
{
width :1200px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
Your request is not entirely clear, but you could use min-height to make an element have a minimum height:
.wrapper {
width: 1200px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
http://jsfiddle.net/uQjEn/3/
And:
http://jsfiddle.net/uQjEn/2/
Never, ever use overflow: hidden with an explicit height. I know all the cool kids are using that to contain floats but you can't combine that with a height set.
Remove the overflow property or the height property.