I am using Bootstrap 4 and I am making use of the CSS class called fixed-top to leave my sidebar landline while I go down with the scroll, this works perfect, but it happens that what I have inside container-fluid which is a table, is below sidebar, as I show it in The following example:
Keep in mind that I also use one sidebar Toggle to contract or not the sidebar, likewise the table is below the
I leave the class fixed-top and class code container-fluid
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.container-fluid {
width: 100%;
padding-right: 0.75rem;
padding-left: 0.75rem;
margin-right: auto;
margin-left: auto;
}
UPDATE:
Add HTML code
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="/Content/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion toggled fixed-top" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center">
<div class="sidebar-brand-icon rotate-n-15">
</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Nav Item - Dashboard -->
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "TicketForm")">
<i class="fa fa-paper-plane"></i>
<span>Abrir un ticket</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "Tickets")">
<i class="fa fa-bars"></i>
<span>Listado de Tickets</span>
</a>
</li>
<!-- Nav Item ties Collapse Menu -->
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "Service")">
<i class="fa fa-cogs"></i>
<span>Gestionar servicios</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "Report")">
<i class="fa fa-table"></i>
<span>Reportes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "Dashboard")">
<i class="fa fa-line-chart"></i>
<span>Dashboard</span>
</a>
</li>
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
</body>
</html>
$(document).ready(function() {
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
});
/* Sidebar */
#sidebar-wrapper {
z-index: 1;
position: fixed;
width: 150px;
height: 100%;
overflow-y: hidden;
background: #5b4282;
opacity: 0.9;
transition: all 0.5s;
}
/* Main Content */
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
padding-left: 150px;
transition: all 0.5s;
}
#menu-toggle {
transition: all 0.3s;
font-size: 2em;
display: block;
text-align: center;
}
/* Change the width of the sidebar to display it*/
#wrapper.menuDisplayed #sidebar-wrapper {
width: 250px;
}
#wrapper.menuDisplayed #page-content-wrapper {
padding-left: 250px;
}
/* Sidebar styling */
.sidebar-nav {
padding: 0;
list-style: none;
transition: all 0.5s;
width: 100%;
text-align: center;
}
.sidebar-nav li {
line-height: 40px;
width: 100%;
transition: all 0.3s;
padding: 10px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li:hover {
background: #846bab;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<span class="fa fa-bars"></span>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="text-center">Sidebar</h1>
<h2 class="small text-center">Second Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!DOCTYPE html>
</body>
</html>
You need to divide the page in two sections first. Then distribute them as content section and sidebar section. That should solve your overlapping issue. like below snippet
<body>
<div id="wrapper">
<div id="sidebar">
dashboard menu (that nav tag and its childs)...
make this div fixed and sticky
</div>
<div id="content">
Contents
</div>
</div>
</body
This is just div distribution without css.
Related
main{
flex:1;
}
html{
height: 100%;
}
.flex-bodyContainer{
display: flex;
flex-direction: column;
flex-grow: 1;
height: inherit;
}
body {
font-family: "Lato", "Helvetica Neue", "Helvetica", sans-serif;
margin: 0;
height: inherit;
}
* { box-sizing: border-box; }
.flex-container {
display: flex;
height:100%;
}
.flex-item{
padding: 1em;
}
.flex-item#0{
flex-basis: 240px;
}
.flex-item#1{
flex: 1;
flex-grow: fill;
background-color: #eee;
}
.flex-item#1, .flex-ImageContainer{
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.flex-item#1 .flex-ImageContainer .flex-imageItem{
flex: 0 0 250px;
background-color: white;
margin:0.5rem;
padding: .5rem 1rem;
border-radius: 10px;
box-shadow: 0 1 3px;
}
.flex-item#1 .flex-ImageContainer .flex-item .flex-imageItem p{
padding:0.5rem 1rem;
}
.flex-item#2{
flex-basis: 180px;
flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cards</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- normalize.css for cross-browser stuff -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="flex-bodyContainer">
<main>
<div class="flex-container">
<section class="flex-item" id="0">
<h1>Cards</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ullam! Provident at accusantium, explicabo odio laborum ducimus earum amet repudiandae commodi quod distinctio, iste reprehenderit nihil ullam dolorum illo fugit.</p>
</section>
<section class="flex-item" id="1">
<div class="flex-ImageContainer">
<div class="flex-imageItem">
<!-- Card 1 -->
<img src="img/abstract1.jpg" alt="abstract art">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, laborum.</p>
</div>
<div class="flex-imageItem">
<!-- Card 2 -->
<img src="img/abstract2.jpg" alt="abstract art">
<p>Doloremque commodi unde eaque! Et natus dolorum corrupti ut numquam.</p>
</div>
<div class="flex-imageItem">
<!-- Card 3 -->
<img src="img/abstract3.jpg" alt="abstract art">
<p>Odio praesentium cum nemo nesciunt architecto, quam voluptate porro inventore.</p>
</div>
<div class="flex-imageItem"></div>
<!-- Card 4 -->
<img src="img/abstract4.jpg" alt="abstract art">
<p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
</div>
<div class="flex-imageItem">
<!-- Card 5 -->
<img src="img/abstract5.jpg" alt="abstract art">
<p>Odit id earum commodi tempora voluptatum mollitia dolorum, perspiciatis nulla!</p>
</div>
</div>
</section>
<section class="flex-item" id="2">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Delectus, aliquid vitae?</li>
<li>Vero, molestias debitis.</li>
<li>Obcaecati, vitae amet?</li>
<li>A, nulla dolore!</li>
<li>Error, nesciunt at.</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo voluptates sint laudantium quaerat commodi!</p>
<p>Aliquam, harum cumque aspernatur consectetur tempore dicta explicabo facere, adipisci sunt quas perferendis repudiandae sequi!</p>
<p>Dolore aut error distinctio! Nemo impedit ipsum sunt neque vel enim unde incidunt nam consequuntur!</p>
</section>
</div>
</main>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title>Cards</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- normalize.css for cross-browser stuff -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css"> </head>
Cards
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ullam! Provident at accusantium, explicabo odio laborum
ducimus earum amet repudiandae commodi quod distinctio, iste
reprehenderit nihil ullam dolorum illo fugit.
<section class="flex-item" id="1">
<div class="flex-ImageContainer">
<div class="flex-imageItem">
<!-- Card 1 -->
<img src="img/abstract1.jpg" alt="abstract art">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, laborum.</p>
</div>
<div class="flex-imageItem">
<!-- Card 2 -->
<img src="img/abstract2.jpg" alt="abstract art">
<p>Doloremque commodi unde eaque! Et natus dolorum corrupti ut numquam.</p>
</div>
<div class="flex-imageItem">
<!-- Card 3 -->
<img src="img/abstract3.jpg" alt="abstract art">
<p>Odio praesentium cum nemo nesciunt architecto, quam voluptate porro inventore.</p>
</div>
<div class="flex-imageItem"></div>
<!-- Card 4 -->
<img src="img/abstract4.jpg" alt="abstract art">
<p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
</div>
<div class="flex-imageItem">
<!-- Card 5 -->
<img src="img/abstract5.jpg" alt="abstract art">
<p>Odit id earum commodi tempora voluptatum mollitia dolorum, perspiciatis nulla!</p>
</div>
</div>
</section>
<section class="flex-item" id="2">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Delectus, aliquid vitae?</li>
<li>Vero, molestias debitis.</li>
<li>Obcaecati, vitae amet?</li>
<li>A, nulla dolore!</li>
<li>Error, nesciunt at.</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo voluptates sint laudantium quaerat commodi!</p>
<p>Aliquam, harum cumque aspernatur consectetur tempore dicta explicabo facere, adipisci sunt quas perferendis
repudiandae sequi!
Dolore aut error distinctio! Nemo impedit ipsum sunt neque vel enim unde incidunt nam consequuntur!
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 1 year ago.
I was trying to make a scrollable(in X direction) flexbox container to display cards but as the number of cards increase the width of cards decrease but I want the cards to be of equal width even though it overflows the body. I tried this also Full width flex items but didn't worked please help me
boyd{
overflow:hidden}
.container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: scroll;
width: 100%;
}
.container .card {
padding: 10px;
border: 0.3px solid rgba(219, 214, 214, 0.801);
border-radius: 5px;
box-shadow: 1px 4px 8px 0px rgba(219, 214, 214, 0.801);
width: 18rem;
}
.card-head {
text-align: center;
}
.cardimg img {
width: 95%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Website</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
</div>
<div class="mainbody">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque delectus excepturi quas, placeat voluptatibus quam similique magni in dicta eligendi ratione, amet quaerat debitis quo ipsum quasi. Numquam, eos veritatis?50
</div>
</body>
</html>
Try this:
.container .card {
flex-shrink: 0;
/* ... */
}
flex-shrink docs: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
Info in advance:
I've been looking for a solution for almost a week now and have already searched half of StackOverflow.
I know that there are many questions with the same title, but these have not brought me any further.
So please before commenting that this is a duplicate, first try the respective solution on my code.
The goal:
I want to add my footer at the very end of the page after the content.
The problem:
The ideas I have tried so far do not work properly. Either the content is permanently displayed at the edge of the screen, no matter where you are (so to speak a sticky footer), or the footer is in the middle of the content.
The Code (HTML & SCSS):
<html>
<head>
<link id="theme" rel="stylesheet" href="style.css" type="text/css" />
<title>Some page with footer</title>
</head>
<body>
<!-- Navigation - Don't worry, the navigation stylesheet isn't included-->
<div class="navigation">
<input id="burger" type="checkbox" />
<label for="burger">
<span></span>
<span></span>
</label>
<nav>
<div class="logo">
</div>
<ul>
<li>Some navigation</li>
<li>Some content</li>
</ul>
</nav>
<div class="icons">
</div>
</div>
<!-- Content -->
<main>
<div class="content">
<h2 id="faq">FAQ</h2>
<p>Some content here:
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<br>
</div>
</main>
<!-- Footer -->
<footer>
<ul>
<li># Copyright 2021 by some guy</li>
<li>This is not the final website.</li>
<li>Contact</li>
<li>AGB/TERMS</li>
<li>LEGAL</li>
</ul>
</footer>
</body>
</html>
body {
main {
position: absolute;
top: 15vh;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
line-height: 40px;
text-align: center;
width: 90%;
h2 {
position: relative;
font-family: 'Times New Roman', Times, serif ;
font-size: 2.7vh;
text-align: center;
}
p {
position: relative;
font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
font-size: 1.5vh;
text-align: center;
}
}
footer {
position: absolute; // Footer is inside the content
left: 0;
top: 100vh;
bottom: 0;
width: 100%;
height: 60px;
text-align: center;
background-color: red;
ul li {
display: inline;
}
}
}
I think this might help you
body {
margin: 0;
padding: 0;
}
.content {
top: 15vh;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
line-height: 40px;
text-align: center;
width: 90%;
}
h2 {
position: relative;
font-family: 'Times New Roman', Times, serif;
font-size: 2.7vh;
text-align: center;
}
p {
position: relative;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 1.5vh;
text-align: center;
}
footer {
left: 0;
margin: 0;
padding: 0;
height: 60px;
text-align: center;
background-color: red;
padding: 0;
}
ul, li {
display: inline;
}
<html lang="en">
<head>
<link id="theme" rel="stylesheet" href="style.css" type="text/css" />
<title>Some page with footer</title>
</head>
<body>
<!-- Navigation - Don't worry, the navigation stylesheet isn't included-->
<div class="navigation">
<input id="burger" type="checkbox" />
<label for="burger">
<span></span>
<span></span>
</label>
<nav>
<div class="logo">
</div>
<ul>
<li>Some navigation</li>
<li>Some content</li>
</ul>
</nav>
<div class="icons">
</div>
</div>
<!-- Content -->
<main>
<div class="content">
<h2 id="faq">FAQ</h2>
<p>Some content here:
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<br>
</div>
</main>
<!-- Footer -->
<footer>
<ul>
<li># Copyright 2021 by some guy</li>
<li>This is not the final website.</li>
<li>Contact</li>
<li>AGB/TERMS</li>
<li>LEGAL</li>
</ul>
</footer>
</body>
</html>
WordPress theme developers are always faced with this problem. One way to go about is to give your "main" element a style of
height:100vh;
This way it pushes the footer to the bottom of the page without you going through the stress of
position:absolute;
I have problem with position on CSS.
I create 3 elements: a menu navbar, a category bar (to filter content), and content.
It looks like this:
*Menu `navbar`*
Home About US
*Category bar*
Category 1 Category 2
*Content*
Lorem ipsum dolor sit amet consectetur adipisicing elit
When scrolling down, the menu show is hidden, and category bar will be fixed on top.
Screenshot:
When I add CSS code to fix category bar at top:
ul#filters {
overflow: hidden;
background-color: #333;
position: fixed;
width: 100%;
}
ul#filters li {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
It looks like:
I expected output is:
When loading page success, like the first image in my answer. When the user scrolls down, menu hidden, category bar fix top, content at below category bar.
Like this:
Note: change menu bar to category bar
Here is my code:
ul#filters {
overflow: hidden;
background-color: #333;
position: fixed;
width: 100%;
}
ul#filters li {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-fixed green child-nav">
<div class="container-fluid">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse ">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About US</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</nav>
<div class="container">
<ul id="filters" class="loaiduan clearfix">
<li class="li-selected">
Category 1
</li>
<li class="li-selected">
Category 2
</li>
</ul>
<div id="container" class="list">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
</div>
</div>
Just use bootstrap class (navbar-fixed-top)
Example:
<nav class="navbar navbar-fixed-top green child-nav">
Hope to help!
I'd use Bootstrap's navbar.
You can make stick it on top with just one parameter, plus it's responsive.
Let me know if it works for you.
I'm trying to make a sidebar on the left hand side of the page with the content to the right of it. the problem I'm running into is that when I try to make the div 100% height, I have to set it to position: absolute; which causes the content to overlap the sidebar.
Here is my HTML
<div class="row">
<div class="sidebar col-sm-3">
<ul>
<li class="active">
<h3>Link</h3>
</li>
<li class="">
<h3>Link</h3>
</li>
<li class="">
<h3>Link</h3>
</li>
<li class="active">
<h3>Link</h3>
</li>
</ul>
</div>
<!-- sidebar -->
<div class="sidebar-content col-sm-9">
<ul>
<li class="active">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
</ul>
</div>
<!-- sidebar-content -->
</div>
<!-- row -->
And my CSS
.sidebar {
background: #eee;
height: 100%;
padding-top: 100px !important;
}
.sidebar-content ul li {
display: none;
}
.sidebar-content ul li.active {
display: block;
}
.sidebar-content {
position: relative;
right: 0;
padding: 100px;
}
Can anybody tell me how to make the div relative and 100% height or a better way to go about creating a sidebar?
Fiddle: https://jsfiddle.net/3Lapzoyf/3/
Solution:
Add a height of 100vh (which is a length unit representing 1% of the viewport height). This will result in a sidebar that has a height of 100% of the viewport height. Also make sure you have your row(s) inside a .container or .container-fluid when you are using Twitter Bootstrap (if you didn't do that already).
HTML:
<div class="container-fluid">
<div class="row">
<div class="sidebar col-sm-3">
<ul>
<li class="active">
<h3>Link</h3>
</li>
<li class="">
<h3>Link</h3>
</li>
<li class="">
<h3>Link</h3>
</li>
<li class="active">
<h3>Link</h3>
</li>
</ul>
</div><!-- sidebar -->
<div class="sidebar-content col-sm-9">
<ul>
<li class="active">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
</ul>
</div><!-- sidebar-content -->
</div><!-- row -->
</div>
CSS:
.sidebar {
background: #eee;
height: 100vh;
padding-top: 100px;
}
.sidebar-content ul li {
display: none;
}
.sidebar-content ul li.active {
display: block;
}
.sidebar-content {
padding: 100px;
position: relative;
right: 0;
}
Fiddle: https://jsfiddle.net/3Lapzoyf/4/