After creating some basic messy sites I motivated myself to do something better and responsive. And I've got a problem.
The problem is when my site has more height than 100vh and I need to scroll it down, then appeares horizontal scroll.
I tried changing units on containers, removing left/right paddings, margins in some places added margin:0; padding:0; in my 'reset.css' file and still I have no idea what can I do to fix it.
I know that I can use overflow but I read that actually it's not fixing but hacking and I want to know why this happens.
My site looks kinda like this. Not exacly but kinda, and as you see there is little space to slide horizontaly.
Sample code :
.container{
display: flex;
flex-direction: column;
width:100vw;
https://codepen.io/anon/pen/zXLMPX
Also I'll be happy if u give me some advices/tips what I can do better in future, thank you!
The problem is coming from the fact that you haven't normalized your HTML yet. HTML naturally has some padding and margin. You should almost always remove this with the universal selector at the beginning of a project. You can also remove it from the html or body tags directly.
Here is a snippet without removing the default margin/padding:
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
background-color: orange;
}
<div class="container"></div>
Here is a snippet removing the margin/padding using the universal selector:
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
background-color: orange;
}
<div class="container"></div>
If you remove the margin on your body tag it should remove the horizontal scroll:
body {
margin: 0;
}
Alternatively you can use overflow-x: hidden to always hide the horizontal scroll.
On your container use
.container { width: 100%; }
the issue might also be with how codepen displays your page.
If you want to disable horizontal scroll entirely you can always do this
body { overflow-x: hidden; }
Related
I often need that html and body elements have the size of the screen. Typically, in the case when I want to have a svg element fit the whole screen.
To achieve that, I saw that it was possible to use CSS code as follow.
html,body{margin:0;padding:0;height:100%;}
The code that I personnaly use is the following one.
html {
height: 100%;
display: flex;
}
body {
flex-grow: 1;
display: flex;
flex-direction: column;
}
Both seem to work well, but I recently had the following remark.
html { height: 100%; display: flex; } is a useless declaration. html height will always be calculated to fit content. Also 100% means 100% of the parent. html has no parent... also applying flexbox to html is useless as it only has 1 child element that is visible: body.
Actually:
I put 100% of html height in order to have it fit the screen height.
I apply flexbox to html in order to be able to use flex-glow: 1 on its child, and have this child filling its parent.
Is there any better to solution than mine?
I personally use this:
html {
display: grid;
min-height: 100%;
}
This will make your body full height by default and will also respect default margin
html {
display: grid;
min-height: 100%;
background: blue;
}
body {
background: red;
}
And you can easily use height:100% on an inner element without issue:
html {
display: grid;
min-height: 100%;
background: blue;
}
body {
background: red;
}
.box {
height: 100%;
border: 5px solid green;
box-sizing: border-box;
}
<div class="box"></div>
I find that whenever working with elements that need to be the full height of the screen height: 100vh is usually a good place to start. VH = viewport height. I use it over height: 100% as depending on the layout 100% doesn't always equal the page height, so with VH you know exactly what you are getting!
With VH you can also then use a calc() in your CSS, so if you needed your body to fill the whole height of the page, but subtract the height of a header for example you could do something like this:
<header style="height: 64px">
<section style="height: calc(100vh - 64px)"
I'm attempting to create a "bookshelf" using html and sass (Note: this is heavily based on http://ameijer.nl/2013/03/bookshelf-css-only/) You can see my version of the concept here:
https://mainstringargs.github.io/bookshelf.html
I'm trying to only show the horizontal scrollbar when necessary for the particular "bookshelf" -- for example, in the "Read" shelf above -- but not have it appear when not necessary -- see "Reading" & "On Deck" at the link.
I expected using "overflow: auto;" would give me this effect, but that seems to cause the scrollbar to always appear.
The relevant sass file is here: https://github.com/mainstringargs/mainstringargs.github.io/blob/master/src/styles/_bookshelf.scss
How can I only show the horizontal scrollbar when needed for each particular bookshelf?
As an example, it currently looks like this with horizontal scrollbars on both displayed bookshelfs even when not enough books:
I want it to look like this mockup (Note the bottom bookshelf has no horizontal scrollbar because there aren't enough books there, but the top one does because there are enough books to scroll):
You can use flexbox and let .books overflow vs .shelf just be sure to remove the width: 1470px; from .books, .shelf:after:
.shelf {
height:auto;
overflow: hidden;
padding: 0;
}
.books {
position: relative;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow: auto;
align-items:flex-start;
justify-content: flex-start;
height: 420px;
z-index: 1;
}
.books, .shelf:after {
/* width: 1470px; */
box-sizing: border-box;
padding: 40px 30px;
margin: 0;
width: 100%;
}
.book {
flex-shrink: 0;
}
By looking at your code if you only want to apply a horizontal scroll when necessary and not vertically.
Use the following on your class name:
.books {
overflow-x: auto; // Auto horizontal
overflow-y: hidden; // Disable vertical scrolling
}
Try that see if it works. No need to add scroll but let the browser decide with the "auto" set.
I'm having problem with showing full map inside layout created using materialized framework.
I'm having issues with footer area where I can't figure out how to remove white space in footer area. It looks something like this on wider screen.
On smaller screen it looks like this.
I tried with this:
.map {
height: 100%;
width:100%;
}
but without any luck.
Also, I'm wondering how to prioritize navbar and put it above map.
Here is jsfiddle with described problem. zhank you
.map {
position:absolute;
margin-top:100px;
height: calc(100vh-100px);
width:100vw;
}
Try this css, I guess it will make your work easy.
A bit late answer but here it goes:
I simply added flex 1 0 auto in for header, main and footer section
header, main, footer {
padding-left: 300px;
flex: 1 0 auto;
}
and for body section I added display: flex; attribute
Like this:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
Now map is scaling properly inside defined layout.
I currently have a simple header, main, footer structure in my angular project and would like to make the main-component a flex-box in order to arrange all given components horizontally with equal width. Additionally I want to change the flex-direction, when the screen width is lower than 700px to column.
Since I already achieved this with pure HTML + CSS (see jsfiddle: http://jsfiddle.net/aJPw7/443/) I have the feeling that this has something to do with angular parent components.
Expected behaviour: The two <app-content-section> elements each take 50% width of the <app-main-component> and 100% height. When I change the flex-direction to column they should have 100% width and 50% height:
Currrent behaviour: The <app-content-section> elements align when I use "justify-content" but are not influenced by any hight or width attributes.
Style.css
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
app-root HTML:
<app-main-component>
<app-content-section></app-content-section>
<app-content-section></app-content-section>
</app-main-component>
app-main-component HTML:
<div class="main-component">
<ng-content></ng-content>
</div>
app-main-component CSS:
.main-component {
display: flex;
flex-direction: row;
height: 100%;
}
#media screen and (max-width: 700px) {
.main-component {
flex-direction: column;
}
}
app-content-section HTML:
<div class="content-section">
<a>Test</a>
</div>
app-content-section CSS:
.content-section {
width: 100%;
height: 100%;
}
Edit1: I also tried :host{ } but still no luck.
Edit2: I created another jsfiddle where I achieved the correct width, by styling the host-element and adding flex: 1, but elements still won´t use the whole height. https://jsfiddle.net/1c15q243/19/
So the correct answer is adding a :host{ flex: 1; } in the "app-content-section CSS" in order to give its hosting-component <app-content-section> the correct flex-sizing.
I figured it out in the fiddle of my second edit, but #karthikaruna pointed out that I forgot to add HTML- tag in the stylig file.
Set 100% height to html. Here is the updated fiddle.
I have two fullscreen divs which are placed relatively below each other. But when I'm visiting the page, the browser always shows me unwanted scrollbars and a width greater than 100vw. When there is only one div, the whole thing works like a charm. Would appreciate any help here :)
<html>
<head>
<link rel="stylesheet" type="text/css" href="normalize.css">
<style>
.section {
position: relative;
width: 100vw;
height: 100vh;
background-color: red;
}
.section.second {
background-color: green;
}
</style>
</head>
<body>
<div class="section">ASD1</div>
<div class="section second">ASD2</div>
</body>
</html>
This is a known issue.
According to https://caniuse.com/#feat=viewport-units,
"Currently all browsers but Firefox incorrectly consider 100vw to be the entire page width, including vertical scroll bar, which can cause a horizontal scroll bar when overflow: auto is set."
You can add following CSS style to fix it,
html, body {margin: 0; padding: 0; overflow-x:hidden;}
Example (JSBin)
Thats because BODY element has its own margins by default. You need to make it zero. You can check it here (jsfiddle example).
body { margin: 0; }
First of all, to remove unwanted margins and paddings, you should always perform a CSS reset (resets all browser specific properties to zero) or a CSS normalization (sets all properties to the same default value for every browser, but not zero). For debugging purposes it is enough to write the following:
* {
margin: 0;
padding: 0;
}
In a real project you should definitely use a better solution like Eric Meyer’s reset or Normalize.css.
Okay, now we managed to solve the spacing issue, but this still leaves us with the scrollbar issue. For a solution look at this post. It says
(...)the horizontal scroll is present because of the vertical scroll.
which you can solve by giving max-width: 100%.
Hence, this is the final solution:
* {
margin: 0;
padding: 0;
}
.section {
position: relative;
width: 100vw;
height: 100vh;
max-width: 100%;
background-color: red;
}
.section.second {
background-color: green;
}
<div class="section">ASD1</div>
<div class="section second">ASD2</div>