I have this pen here: https://codepen.io/anon/pen/wPdrod
As you can see (at least in Chrome and Firefox), there are 2 vertical scroll bars. There should only be the inner one, as the header should remain static.
The CSS causing this is:
#app
{
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100vh;
}
Particularly the 100vh height. This is causing the viewport to be too tall by 36px. Which is the header height. If I do:
#app
{
...
height: calc(100vh - 36px);
}
Then it works perfectly fine. I'm trying to figure out why I need to do this in the first place. What about this layout is causing the 100vh to account for the header height? I feel like I shouldn't have to do that calc as the header is within the layout div along with the rest of the elements.
#header is inside #app so it's normal behavior, specially if your neighbor (#body) has height: 100% (height is set relative to parent so it's also 100vh). That's the reason to show second scroll.
What actually you can do is removing height from #body.
Related
I'm doing a project on Frontend Mentor and it wants a layout for mobile and desktop.
I can not for the life of me get this to center horizontally. I've also noticed that when I switch to mobile view my body is smaller than the container it contains which may be some of the problem. I'm new to CSS and HTML so it's probably just something I'm missing.
Code can be found here - https://github.com/grizzle83/product-preview-card-component-main.git
Used Flexbox for mobile and grid for desktop just to get practice on both.
Expected justify-content/items and align-items to center this but it is not.
I can fix the body being being smaller than the container by adding position: absolute to the body element in css but this seems like a band-aid and not best practice.
As you have not set a height to your container it has taken itself the minimum height required to fit all its child elements inside it. In order to expand the div across the screen provide it with a minimum height that matches the screen height.
So your .container code in your style.css must look like this.
.container {
display: flex;
flex-direction: column;
width: 375px;
justify-content: center;
align-items: center;
margin: auto;
min-height: 100vh;
}
As I can see in your code, your element is not having full height, you can give specific height or just try below..
.container {
min-height: 100vh;
}
I'm currently trying to get an element (div) stretching itself over the free space of a parent element while respecting the size of other elements on its level. I found some solutions and tried most of them but I couldn't get it to work. I suspect this is because of the cms I'm working with which - when telling it to make a set of columns the same height - changes the parent display-style to table-cell. So... here is an image of what I'm trying to archive.
As said, the CMS changes the blue container to display: table-cell to stretch it over the whole area and make all columns in a row the same height. Inside of this blue container are the elements I can control. These are up to four div (white/green) inside of a parent div (yellow). The white div are dynamic and not always present and the green one needs to stretch over the whole vertical space no matter which of the white elements are present.
And idea how to accomplish that? I tried a lot of answers about this topic but they didnt work.. I think that's maybe due to the fact that the blue container is a table-cell?
edit: Here is what I got so far.
<div id="box_wrap">
<div class="box_title">
Title
</div>
<div class="box_image">
Image
</div>
<div class="box_content">
Content
</div>
<div class="box_more">
Read More
</div>
</div>
All of this is in a container provided by the CMS itself which has the attibute display: table-cell.
#box_wrap {
display: flex;
flex-direction: column;
}
.box_content {
display: flex;
flex: 2;
}
I think the problem might be that the container provided my the CMS has no defined height. If I give my #box_wrap a fixed height manually then the div in it will work as they should. I also tried height: auto and height: 100% for the #box_wrap and it doesn't work. Again, probably because the parent has no defined height, no? That is the last thing that I need to solve. The #box_wrap needs to stretch over the vertical, currently it only extends as far as it needs to cover the content.
I also noticed that the first image I provided wasn't 100% accurate so I updated it.
I would use this to allow the .box_content to grow (i.e. become higher) and the others not:
.box_title,
.box_image,
.box_image {
flex-grow: 0;
}
.box_content {
flex-grow: 1;
}
In addition, you should apply height: 100% to #box_wrap, but for that you also need height: 100% on body and html to have a reference for the height of #box_wrap. So, to sum up:
html, body {
height: 100%;
margin: 0;
}
#box_wrap {
height: 100%;
}
You also might want to add...
body {
padding: 10px;
box-sizing: border-box;
}
...to get that distance between the edge of the screen and your container as it's shown in your image.
Please find my code here: https://jsfiddle.net/5jv8m5xf/
The code above consists of a fixed header and a content.
I want that the fixed header and the content have the same relative width (%). Therefore, I put width: 80%; for both of them. However, as you can see in the JSFiddle the fixed header has a bigger width than the content.
When I put a fixed width (px) for example width: 500px; for both of them they have exactly the same width. However, I want them to have the same relative width (%) to make the layout responsive.
What do I have to change in my code to achieve this?
Default browser styles add 8px of margin to the <body> element.
Those are offsetting your .content, but won't effect the .header, because it's fixed.
Add this to align your elements:
body {
margin: 0;
}
I'm using flexbox to responsively lay out a bunch of images.
.cards
.card.card1
.card.card2
.card.card3
.card.card4
etc....
footer
css:
.cards{
display: flex;
width: 100%;
flex-wrap: wrap;
height: 81.2rem;
}
.card{
display: flex;
flex-wrap: wrap;
height: 100%;
max-height: 28rem;
position: relative;
}
The problem I'm having is...
I have a footer that needs to be below the .cards div, but since .cards has a height, the footer is hovering over the div where I tell the height to be. (The cards themselves extend past the height.)
I have tried setting a taller height, however, then the space between the rows of cards expand (which I don't want). I've also tried not setting a height, but then the cards don't lay out at all, they just disappear or float way down the page.
Is there a way I can clear the .cards div?
Or just in general, get the footer to appear below the cards?
This shows the footer where it currently is, which is incorrect.
This shows the footer where I need it to be:
Instead of height: 100%, which limits the container to a fixed height, use min-height: 100% or remove height altogether.
If your height property is installed properly, you may need to apply the min-height to parent or ancestor elements.
More details: Working with the CSS height property and percentage values
Additional notes from OP:
Add the height to the direct children of the flex-box, this allows the container to determine its height.
On another note, if you put the height on the sub-children (not direct descendants), the container flex-box will not know how to set its own size and will have no height.
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