I am working on a page with a menu bar.
the height of the menu bar is 40px
and I set the top of the body tag to 40px too.
However, the scrollbar of the body tag is still at top=0px.
To do this approach you can use flex display. you should wrap your main content in another section and scroll the wrapper inside itself.
here an example :
<body>
<nav class="nav">
<!-- *********** your nav items ******************* -->
</nav>
<main class="content">
<!-- your content should be placed here ****************-->
</main>
</body>
and the CSS code :
body {
display: flex;
height: 100vh;
width: 100vw;
flex-direction: column;
overflow: hidden;
}
.nav {
height: 40px;
background: red;
}
.content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
background: blue;
}
Related
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
I am having issues trying to make my footer at the bottom, but it overlaps the content on the page if there are too much content.
this is my footer css
footer {
position:fixed;
bottom: 0;
}
this is how the page looks without any content
this is how the page looks with overlap content with the footer
You could structure your HTML as follows:
<body>
<header class="Header"></header>
<main class="Main"></main>
<footer class="Footer"></footer>
</body>
Then, use flex box to render the footer at the bottom of your page using the following code:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
footer,
header {
flex: 0;
}
See a fully working demo code below and learn more about flex box here:
header::after,
main::after,
footer::after {
content: attr(class);
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
main {
flex: 1;
}
footer,
header {
flex: 0;
}
<header class="Header"></header>
<main class="Main"></main>
<footer class="Footer"></footer>
I'm making a horizontal scrolling site and encountering an issue where, when using flexbox, my content is pushed out of the page by my background image. Please see my pen:
https://codepen.io/anon/pen/NwgQmG
I'm using three background images that each take up a full page's width and inline-block to create horizontal scrolling.
In addition, I want to add flexbox so that I can create my own grid system on top of each background image. The problem is that when I add flexbox, I must use position: absolute on the first div below my background image so that the background image isn't pushed down to the bottom of the page.
<div id="homeImg" class="background-image-full">
<div class="container row" style="position: absolute;">
<div class="container column">
Hello There!
</div>
</div>
</div>
Then, when I attempt to add text to a container inside my grid system ("Hello There!"), the text does not show up. It's pushed to the upper left-hand corner, as indicated by inspect.
How can I get my text to show up? Is there a better way to use flexbox where I don't have to also use absolute positioning?
Thanks!
The problem is you set the font-size:0
Change it to some px value as I did it in this Codepen
Also you need to give position:relative to the same class i.e. .surroundContainer.
Which will make your container stick to the current image.
* {
margin: 0;
}
/*box-sizing will ensure an element stays within a parent width, even if padding or borders are applied.*/
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.wrapper {
height: 100vh;
background-color: gray;
}
.surroundContainer {
position: relative;
height: 100vh;
white-space: nowrap;
font-size: 20px;
color: white;
}
/* IGNORE: this is a class for a plugin */
.scroller {
/*This scroll-snap functionality only works in Safari*/
-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-x: repeat(100%);
/*This scroll snap functionality is part of a polyfill
that enables the functionality in Chrome.*/
scroll-snap-type: mandatory;
scroll-snap-destination: 0% 100%;
scroll-snap-points-x: repeat(100%);
/*Here, I've set the width to be 100% of the VW
(the portion of the screen that the viewer sees before scrolling).
Thus, overflow occurs (because my divs stretch three screens or three VWs, basically)
and the scroll event from scrollsnap-polyfill.js is triggered.*/
width: 100vw;
overflow: auto;
}
.background-image-full {
height: 100%;
width: 100%;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
}
#homeImg {
background-image: url("https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg");
}
#AboutImg {
background-image: url("http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg");
}
#CreditImg {
background-image: url("https://www.bluecross.org.uk/sites/default/files/assets/images/124044lpr.jpg");
}
.container {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.row {
flex-flow: row;
-webkit-flex-flow: row;
}
.column {
flex-flow: column;
}
<!-- This is the wrapper for the entire page -->
<div class="wrapper">
<!-- This is the div that contains the horizontal scrolling -->
<div class="surroundContainer scroller">
<div id="homeImg" class="background-image-full">
<div class="container" style="position: absolute;">
<div class="column" style="border:5px solid white; height:300px; width:300px;">
<p>Hello There!</p>
</div>
</div>
</div>
<div id="CreditImg" class="background-image-full"></div>
<div id="AboutImg" class="background-image-full"></div>
</div>
</div>
I have a fixed header with position:fixed why it stays on top of other elements and hides them, so I have to add padding to main. Because the height of header varies by content, font-size and padding set by media queries it's not possible to use a fixed value for padding as in the snippet. Is there a solution that respects changing heights of header without using javascript?
body {
margin: 0;
padding: 0;
}
header {
background-color: grey;
position: fixed;
width: 100%;
}
main {
padding-top: 80px; /* bad, because it's fixed */
}
<header>
<h1>Example</h1>
</header>
<main>
<p>Content</p>
</main>
As others have said, you can't do it without javascript, but you can fake a fixed header using flexbox and flex-grow: 1; overflow-y: scroll; on the main content area.
* {margin:0;}
body {
display: flex;
flex-direction: column;
max-height: 100vh;
}
section {
flex-grow: 1;
overflow-y: scroll;
}
main {
background: #eee;
min-height: 500vh;
}
<header>
<h1>Example</h1>
</header>
<section>
<main>
<p>Content</p>
</main>
</section>
<footer>
<p>footer</p>
</footer>
There is no way you can achieve it without the use of Javascript if you want to keep the fixed position. I'd suggest not to use position at all but respect the html hierarchy. And make it "fixed" once scrolling gets it out of the viewport. This is the most typicall approach when you want to have the header visible at all times if height could vary.
I am generating one html page having one tab pane which is very long. So i want to add scroll pane so that visualisation could be better. I found few good examples using div but code becomes very messy with other div so i prefer not to use div.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Independent CSS scrolling panels (with inertia)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="Top">Top Content</div>
<div class="Container">
<div class="Left">Left Content</div>
<div class="Middle">Middle Content</div>
<div class="Right">Right Content</div>
</div>
</body>
</html>
CSS code:
/*I love me some border-box*/
* {
box-sizing: border-box;
}
/*This just stops me getting horizontal scrolling if anything overflows the width*/
body {
overflow-x: hidden;
}
/*Just removing default browser padding/margin*/
html,
body {
padding: 0;
margin: 0;
color: #ebebeb;
}
/*Flexbox gives us the flexiness we need. The top just stays put as there is no scrolling on the body due to the page never exceeding viewport height*/
.Top {
display: flex;
align-items: center;
justify-content: center;
background-color: darkgreen;
font-size: 3rem;
position: relative;
z-index: 10;
height: 100px;
}
/*This is our main wrapping element, it's made 100vh high to ensure it is always the correct size and then moved into place and padded with negative margin and padding*/
.Container {
display: flex;
overflow: hidden;
height: 100vh;
margin-top: -100px;
padding-top: 100px;
position: relative;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}
/*All the scrollable sections should overflow and be whatever height they need to be. As they are flex-items (due to being inside a flex container) they could be made to stretch full height at all times if needed.
WebKit inertia scrolling is being added here for any present/future devices that are able to make use of it.
*/
.Left,
.Middle,
.Right {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
/*Entirely optional – just wanted to remove the scrollbar on WebKit browsers as I find them ugly*/
.Left::-webkit-scrollbar,
.Middle::-webkit-scrollbar,
.Right::-webkit-scrollbar {
display: none;
}
/* Left and Right are set sizes while the Middle is set to flex one so it occupies all remaining space. This could be set as a width too if prefereable, perhaps using calc.*/
.Left {
width: 12.5rem;
background-color: indigo;
}
.Middle {
flex: 1;
}
.Right {
width: 12.5rem;
background-color: violet;
}
Can pls someone pls help me how can i implement it.
I suppose you could use a <table>:
table {
display: block;
height: 500px;
overflow-y: scroll;
}