Check this FIDDLE
This is like a mobile phone prototype where I have fixed height of 50px for header-div and footer-div.
I want the content-div to dynamically adjust its height according to the main-container (which here is acting as mobile screen size). Adjust in such a way that the content overflow should be scrollable in the visible content-div height only.
If I put header-div and footer-div height both 10% and content-div height 80%. So that it arranges according to the screen size. Trouble here is that the header and footer heights will vary according to screen sizes and as a result will make header-div and footer-div bigger/smaller in height.
This is why I have set a certain height for header-div and footer-div both that is 50px. Now I want the content-div to be adjusted in such a way that it dynamically changes its height in accordance to the main-container (parent div)
Appreciate any help. Thanks.
I tried this and I am not sure if you would like it that way but here's what I've got for you...
Change your CSS code for main-container to this.
.main-container {
width: 420px;
height: auto;
background-color: #f7f7f7;
}
change your css code for main-container
.main-container {
width: 420px;
height: 1.2em; //change as per your requirements
background-color: #f7f7f7;
}
Web Style Sheets
CSS tips & tricks
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>
Question Background:
I am looking into a sliding menu panel and have the following codepen to display this:
http://codepen.io/daveharris/pen/pEvEad
The Issue:
The <main> component has a slide-panel style applied to it which is the following:
#main {
background: red;
height: 100vmin!important;
}
In the mobile view the <main> component is not setting to a height of 100%, this is displayed with the use of a red background colour, as shown:
This height issue means that when the panel is closed, the underlying menu can be seen as shown:
I cannot work out why the styling of 100% is not fitting to the entire height of the mobile view?
Note I will be using this with an AngularJS project therefore I have two Divs which will wrap all of the contents, these are named as follows:
<div id="ui-view">
<div id"ResultsController">
Why will the height in mobile view not set to 100% height?
Right now #main height is the same as width value. On #main change to:
#main {
background: red;
min-height: 100vh;
}
It will fix your problem. min-height or just height. vh means viewport height, so it will cover all view.
When working with mobile it is best to work with vh , which is viewport height, and vw, which is viewport width.
For your element you'd want to do the following:
#main {
background-color: #ff0000;
min-height: 100vh; // vh = viewport height
I am using a div to create an accent. It's parent is the content div, which has no specific height, as it is the height of the browser. The div is as simple as the following:
<div class="bar-top"></div>
It's CSS rule is:
.bar-top {
background-color: #000d12;
height: 3%;
max-height: 3%;
min-height: 3%;
}
This rule does not work. Though, if the percentages are replaced with pixel values, the div displays correctly. I assume this has something to do with the parent having no definite height, but I would like to know more technically why, and how to overcome this if I want a div to be a percentage of the web page's height.
Simple math 100% of nothing is nothing. You are correct about the height being based off the parent of the container. You can use % height at the very top element of the page the html and body see below.
html, body{
height: 100%;
}
Though note this is your entire web page so if the full height of you entire webpage is 10000px and you set the height to be 3% that 3% will be out of the 10000.
To the 3% question: you can use css3 height: 3vh that's 3% of the viewport
Here's my css rules:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
}
Using this example: http://getbootstrap.com/examples/sticky-footer/
I can make sticky footer without any issues, however there's one problem. How can i make content container to be full height 100%?
I want to fill this gray background color to the footer. How is that possible? I spent 8 hours already to figure out that. Please, help.
UPDATE
http://jsfiddle.net/3wh7d612/1/
Pay attention to div with class container2 i want to make it full height till the footer.
Amongst the newer responsive CSS selectors, my favorites are definitely vw (Viewport Width) and vh (Viewport Height). A lot of web designs that have come my way call for full page layouts with no containing max-width and no overflow of content that requires scrolling to view. These designs also feature vertical boxes that should collectively be visible within the viewport at the same time regardless of the browser’s height when scaled responsively. When researching to find a CSS solution to this, I stumbled upon the vh/vw units.
Maybe you can use it like this
.content {
min-height: 80vh; // Define based on your needs
}
I have to fit an iframe in screen height. Obviously, I wanted 100% as in width but, since that doesn't work, I used 100vh.
But vh like vw is not exactly 100%.
In my laptop through chrome while the 100% width renders perfectly without the need for a horizontal scroll bar, vw has about a centimeter extra.
vw and vh stand for viewport width and viewport height respectively.
The difference between using width: 100vw instead of width: 100% is that while 100% will make the element fit all the space available, the viewport width has a specific measure, in this case the width of the available screen, including the document margin.
If you set the style body { margin: 0 }, 100vw should behave the same as 100% (for an element that is a child to body).
Additional notes
Using vw as unit for everything in your website, including font sizes and heights, will make it so that the site is always displayed proportionally to the device's screen width regardless of it's resolution. This makes it super easy to ensure your website is displayed exactly the same in both workstation and mobile.
You can set font-size: 1vw (or whatever size suits your project) in your body CSS and everything specified in rem units will automatically scale according to the device screen, so it's easy to port existing projects and even frameworks (such as Bootstrap that already uses rem as unit for everything) to this concept.
Havenard's answer doesn't seem to be strictly true. I've found that vw fills the viewport width, but doesn't account for the scrollbars. So, if your content is taller than the viewport (so that your site has a vertical scrollbar), then using vw results in a small horizontal scrollbar. I had to switch out width: 100vw for width: 100% to get rid of the horizontal scrollbar.
You can solve this issue be adding max-width:
#element {
width: 100vw;
height: 100vw;
max-width: 100%;
}
When you using CSS to make the wrapper full width using the code width: 100vw; then you will notice a horizontal scroll in the page, and that happened because the padding and margin of html and body tags added to the wrapper size, so the solution is to add max-width: 100%
#Havenard's answer provides the perfect explanation for the question. Adding to that, this provides a visual representation of the difference.
You'll be able to notice the key difference between 100vw and 100% when you have a site with scrollbars and an element that is supposed to fit the entire width of the screen.
Option 1
Below is an example of the same.
All i'm doing in the code below is changing the width of <h1> tag from 100vw to 100% when you hover over it.
body{
/* margin: 0; */
}
.scroll{
height: calc(110vh);
}
h1{
width: 100vw;
/* width: 100%;*/
text-align:right;
outline: 5px solid black
}
h1:hover{
width: 100%;
}
h1:before{
content: "100vw "
}
h1:hover:before{
content: "100% "
}
<div class = "scroll">
<h1>Width</h1>
</div>
If you run the above code snippet and hover the text, you'll notice 2 things:
the horizontal scrollar disappears
the entire text will be visible
to you
Note: after running the above snippet, you can play around with above code in browser devtools to see how it affects the elements
Option 2 (Chrome and Edge)
.scroll{
height: calc(110vh);
display: flex;
align-items: baseline;
}
h1{
width: 100vw;
/* width: 100%; */
text-align:right;
outline: 10px solid black
}
<div class="scroll">
<h1>Test</h1>
</div>
Another way to visually see the difference in your own project is by setting a display:flex style to an element with 100vw.
When you highlight this elements in browser devtools, You can notice the a leftward point arrow at the right end of the element. Also you can see than the shading of the highlighted elements spans across the scroll-bar, indicating that it is considering the entire screen-width (including scroll-bar width)
Other questions, that address similar issue are:
100vw causing horizontal overflow, but only if more than one?
CSS Units - What is the difference between vh/vw and %?
Prevent 100vw from creating horizontal scroll