I wanted to ask how I can define a div's minimum height in css.
For example if I am on a small screen and the line break has changed, the div should be automatically resized, but it should be at least 100%.
Just use min-height to keep the div height 100% or higher like this:
HTML:
<div class="someName">
<!-- child elements -->
</div>
CSS:
.someName {
min-height: 100%;
}
Related
I am trying to insert full width hero image. Problem is based on the original height of the image, it's getting too short on mobile device.
Large Screen:
Mobile Screen:
Basically, I wanted little bit bigger height than the calculated height on mobile screen. So, I thought it would be good if I apply a min-height to the image.
So, I have added this:
img {
min-height: 300px;
}
Surely, it's not the way.
How to fix this?
Code Demo
You need to wrap the img block in the parent block. Then in the parent block to set the minimum height, and in the img block to specify width of 100%. This will preserve the aspect ratio of the image, and its height will be either greater or as the parent, but not less than that set in the parent block. Of course, the parent block must inherit the entire screen width from its parent block or explicitly have a width of 100%. For example:
.block__image {
/*width: 100%;*/
min-height: 300px;
}
.block__image img {
width: 100%;
}
<div class="block__image">
<img src="https://i.stack.imgur.com/U1tXC.jpg" alt="image error">
</div>
I've been strolling around the internet for a while but I can't seem the find a fix for my problem.
Perhaps you could help me out.
The issue
I am trying to wrap a div around 2 vertically stacked divs. At this moment I have a top div, which is viewport filling (100% height, 100% width) and a bottom div, which is of variable height but with a 100% width.
The top div serves as a container for horizontally and vertically aligned content.
As soon as I apply a wrapper to the two divs, the top one collapses. It stops filling the entire viewport height.
The example
The current HTML looks like this:
<div id="top">
<div id="top_content">Top content</div>
</div>
<div id="bottom">Bottom content</div>
With of course a JSFiddle: http://jsfiddle.net/4u4nqrcv/
The HTML I need looks like this:
<div id="wrapper">
<div id="top">
<div id="top_content">Top content</div>
</div>
<div id="bottom">Bottom content</div>
</div>
Also with a JSFiddle: http://jsfiddle.net/ggsztx78/
You can clearly see top div collapsed
The question
How can I wrap the 2 vertically stacked divs, maintaining the viewport filling height of the top div? I just need to find out exactly what CSS I should apply to the wrapper and possibly the 2 wrapped divs
You can use the viewport unit vh. 100vh = 100% of the viewport height.
http://jsfiddle.net/ggsztx78/3/
#top {
width: 100%;
height: 100vh;
background-color: #f4f;
display: table;
}
Support isn't that bad if you are not using vmin or vmax.
Working JSfiddle
It's easy, you did not set any css parameter to the wrapper, and it needed to also have height and width of 100%, margin and padding set to 0.
#wrapper{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
You need to also give the wrapper a height: 100%.
By setting height: 100% you tell an element to become 100% of the height of its parent. Therefore you need to give all ancestors of the #top-content an height of 100% to make the #top-content take up 100% of the screens height.
http://www.mysecretathens.gr/kulte_test/as_index.html
I am trying to override the width of #kontainer in my <li> list at the bottom. I want the .nav3 list to be full width, 100% but I cant override the 700px of the parent element, #kontainer
What can I do? I tried the !important; rule, but that didn't give me the results I wanted.
When specifying percentage width, it calculates based off the parent's width. So 100% of 700 is... 700.
You need to specify a pixel width if you want it to go over 700.
Solution 1: You can get .nav3 out of #kontainer
Solution 2: You can add position: absolute; left: 0; to .nav3 and then add some margin-top on #footer tu push it down.
Width 100% means get 100% of the parent element that the child is inside. It actually does what you said it to do! You can get nav3 out of the #kontainer to take the 100% of the body element.
I want the same thing, to override the parent width.
I'm developing a Joomla component
<div class="container mainbody"> //** width 1170px **//
<div>some content</div>
<div>some content</div>
</div>
I don't want to change the width (1170px) of the outer div or .container class because it is default in Joomla template, which will take effect in every page if I change.
In my case, I only need a 100% width for some child div in my website's home page for some design.
What I did is add css in home page html file, since it will not call in other page.
<div class="container mainbody">
<div class="container">some content, width 1170px</div>
<div>some content, width 100%</div>
</div>
<style type="text/css">
.mainbody
{
width:100% !important;
}
</style>
For the div you want a full page width, you should use:
position: absolute;
left: 0px;
right 0px; //but make sure that any content you have below that div, gets margined in response.
margin-top: 200px; //Use the height of the above div
I have just noticed a "VERY" interesting (and bold) way of overriding the parent element's width. Set the child's width to something like:
width: calc(100% + 30%);
Believe it or not, at least Firefox 51 is calculating correctly the child's width, and yes, it is bigger than the parent's width.
I set body {margin: 0 auto; width: 900px;}
100% width of display
I want one of div (or section) inside that body to be 100% of display (not its parent 900px, but more).
What styles should be applied for this div?
<body>
<div>
900px width of this text
</div>
<div style="???">
the whole 100% length of display
</div>
</body>
I don't think you can do it if you set a width on <body>. I'd leave <body> alone and do something like:
div {
width: 900px;
}
div.fullwidth {
width: 100%;
}
and then make sure your content is a series of <div>s, some of which have class="fullwidth" (such elements need to be non-nested, since for a nested element "100%" will be interpreted as "100% of the containing element" which in turn works out to "100% of 900px").
If you want the <div> to be 100% of the screen width, you must set display property in CSS.
display:block;
An example.
You can set position:absolute; which would keep it from inheriting the width from the body.
I have a container div that has the height of my body which is 100%
#pageContainer{
width:800px;
margin:auto;
height:inherit;
}
inside it i have second div positioned absolutely
<div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
So my page looks like this:
<body>
<div id="pageContainer">
<div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
<div>some content here</div>
</div>
</body>
So the problem is the absolutely positioned div has height equal to the screen size, not the page, another words when page is heigher than the visible screen, when I scroll down the div is not expanding to the full height of the parent div (pageContainer). I have tried the top:0px;bottom:0px; as well and it doesn't work. Any one knows what's the trick here?
Javascript: You'd either use jQuery via .height() or EqualHeight,
or
CSS: you'd do something like this: CSS equal columns
You have to set the height of each element in the hierarchy to make it expand like this.
Try something like:
html, body {
height: 100%;
}
Setting the height of the html element is the one that I generally forget to do. It is usually also be necessary to set the #pageContainer height to 100%, although you have it inheriting from the body, so in this case you're okay.
Try adding position:relative; to your #pageContainer. Currently, the absolutely positioned div is taking it's position from the window and not the container div.