I'm working on a project with a sidebar and in that side bar there i's like to have a sticky foot. The problem is the side bar scales to the height to the main page content. So if the main page content is bigger than the screen height, you end up with a big space under the footer if you scroll down the page.
I'd like the footer to stay at the bottom of the screen.
Hopefully my description makes sense.
.sidebar {
height: 100%;
}
.card{
display: flex;
flex-direction: column;
min-height: 90vh;
}
.card-body{
flex: 1;
}
.footer{
}
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
I would recommend flexbox and the vh CSS measurement.
This example will have the footer stuck to the bottom of the viewport, but will also allow the .sidebar to grow larger than the window height if required. So the .footer will be stuck to the bottom with small content in the .card and will move downwards (requiring scrolling to see) if the content in .card gets bigger.
body {
margin: 0;
padding: 0;
}
.sidebar {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.card {
flex-grow: 1;
}
<html>
<body>
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
</body>
</html>
If you really want the .footer stuck to the bottom, even with a lot of contents in the .card, then you could try position: fixed. I've added more content in the .card here so that you can more easily see what happens when it is larger than the body (the body & card content scroll, but .footer is always stuck to the bottom of the viewport).
.card {
/*
.footer is out of the document flow,
so make sure to leave enough space
for it at the bottom of .card
*/
margin-bottom: 1.6em;
}
.footer {
/*
here's the magic, fixed position
at the bottom of the screen
*/
position: fixed;
bottom: 0;
/*
without a bg-color, this will get
messed up with overflowing .card
content
*/
background-color: white;
height: 1.6em;
}
<html>
<body>
<div class="sidebar">
<div class="card">
<div class="card-header">TITLE</div>
<div class="card-body">
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
CONTENT<br/>
</div>
</div>
<div class="footer">
FEEDBACK CONTENT
</div>
</div>
</body>
</html>
check this example. it works css-tricks
html for this
<div class="content">
<div class="content-inside">
<h1>Sticky Footer with Negative Margin 2</h1>
<p><button id="add">Add Content</button></p>
</div>
</div>
<footer class="footer">
Footer
</footer>
css for this
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
Related
Here is my html:
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
.project-img {
width: 400px;
height: 289px;
}
.projects-container {
display: flex;
flex-direction: row;
}
.li-nav {
list-style: none;
padding: 10px 10px 10px 0px;
}
#ul-nav {
display: flex;
flex-direction: row;
}
#navbar {
position: fixed;
background-color: white;
width: 5000px;
}
#main {
padding: 80px 0px 0px 0px;
}
a {
text-decoration: none;
color: black;
font-weight: 500
}
.nav-link {
font-size: 20px;
}
#all {
font-family: Roboto;
}
<div id=all>
<nav id="navbar">
<ul id="ul-nav">
<li class="li-nav"><a class="nav-link" href="#welcome-text">Sobre</a></li>
<li class="li-nav"><a class="nav-link" href="#projects">Projetos</a></l>
<li class="li-nav"><a class="nav-link" id="profile-link" target="_blank" href="https://github.com/caiocavalcante063">Github</a></li>
</ul>
</nav>
<div id="main">
<div id="welcome-section">
<h1 id="welcome-text">Olá, meu nome é Caio e sou estudante de Desenvolvimento Web. Aqui, você irá encontrar meus principais projetos.</h1>
</div>
<div id="projects">
<h2>Projetos</h2>
<div class="projects-container">
<div class="project-tile">
<h3>Tribute Page</h3>
<img class="project-img" src="https://i.ibb.co/CnrgnXL/Captura-de-tela-de-2021-06-03-11-04-03.png" alt="tribute page project">
</div>
<div class="project-tile">
<h3>Technical Documentation Page
<h2>
<img class="project-img" src="https://i.ibb.co/8cCPT2k/Captura-de-tela-de-2021-06-03-10-26-27.png" alt="technical documentation page">
</div </div>
</div>
</div>
</div>
The navbar is in a fixed position, so when I click on a navbar link the page scroll down to the refered content. But the problem is that when I do so the navbar is positioned just where the content should be, covering it.
Is there a way to make the navbar links scroll down just a bit less so that I can get the expected effect? or a more effective solution?
Since the browser is doing what it is told to do properly (scrolling to the anchor's position), you have to do a little "hack" to get something like this to work. Here's the basic idea:
Create a container element for both a title and an (unseen) anchor
Create an element for the title, and put it in the container
Create an element for the anchor, and put it in the container
Use absolute positioning to move the anchor the appropriate amount up (generally something like FIXED_HEADER_HEIGHT + EXTRA_PADDING)
Here's a quick example:
.container {
position: relative;
}
.anchor {
position: absolute;
top: -65px; /* given the fixed header is 50px tall, and you want 15px padding */
left: 0px;
}
And the HTML:
<div class="container">
<h2 class="title">Section Title</h2>
<a class="anchor" name="target"></a>
</div>
Then, any link to #target will go to a location 65px above .title.
I am using a card and after the card I put my footer. But the footer is of very large size as compared to the one mentioned in its css.
Image -
Code -
app.component.html -
<div class="card" id="card-css">
<div class="card-body">
//code
</div>
</div>
<hr class="line" color="#f5821f;" />
<div class="footer text-right" style = "height:50px !important" >
<label style="color: black">© 2018 ICICI. API Developer</label>
</div>
app.component.css
html, body {
height: 100%;
}
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center; /* .push must be the same height as .footer */
}
If I am getting the question correctly then I think you want your footer at bottom of the page. For this you just need to change your bellow css.
position: relative
to
position: fixed;
margin:10px;
and for text size you can add the below css if you want.
font-size: 25px;
I am looking for a way to allow two rows within a single column while the other two columns to the right of it are equal/flexible to the height of those two rows. The width should be 100% when looking at all three columns (so around 33% each column). Here is an example of how I want it to look:
https://i.imgur.com/lLPzXhS.png
I will be filling those boxes with clickable boxes like shown below:
https://i.imgur.com/uyyDbL7.png
I have tried using display: row, display: cell, but I am not able to add any margins to it so this is the product I get:
https://i.imgur.com/Ok6EgT0.png
You can see that I have somewhat of the grid system set up, but not as ideally as I want it. There are no margins that can be set between the red and orange box, even though I am able to add margins to the turqoise and blue box.
Here is the code I have:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
Any thoughts on how to replicate the second image results neatly?
You could use flexbox. Take a look at this simplified example:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
You could also use a minimal flexbox-based grid library like Flexbox Grid.
Margin is used for setting where elements should start so instead use padding between those 2 elements to get the space you want.
I know there is a library called match-height.js that already does this for you but I'm trying to do it from scratch. I have row with 2 columns, the first one has a centered (horizontally and vertically) black square. The second column has a heading and a paragraph. I just want to match the heights of the columns with the class "about-wrapper".
HTML:
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
jQuery:
$(document).ready(function(){
$("#about-logo-wrapper").height = $("#about-text-wrapper").height;
});
You're using height() wrong. It's a function, not a property, and it takes a parameter when you want to use it to set height...
$(document).ready(function(){
$("#about-logo-wrapper").height($("#about-text-wrapper").height());
});
See the documentation for more info...
http://api.jquery.com/height/
I think you need first to check which height is greater: either left cell or right one:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ?
$("#about-text-wrapper").height() :
$("#about-logo-wrapper").height();
then set this height to about-wrapper
$(".about-wrapper").height(h);
Look at snippet in full page mode:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ? $("#about-text-wrapper").height() : $("#about-logo-wrapper").height();
$(".about-wrapper").height(h);
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
#about-text-wrapper {
border: 3px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:
I have a problem to get exact width of flexbox after rendering contents.
I am working on a Windows 8 application (mean ie10 specific).
Here is the code:
[HTML]
<html>
<head>
<title>flexbox test</title>
</head>
<body>
<div class='container'>
<div class='viewport'>
<div class='canvas'>
<div class="item"> A </div>
<div class="item"> B </div>
<div class="item"> C </div>
<div class="item"> D </div>
<div class="item"> E </div>
<div class="item"> F </div>
<div class="item"> G </div>
<div class="item"> H </div>
<div class="item"> I </div>
<div class="item"> J </div>
</div>
</div>
</div>
<hr style="width: 600px; text-align: left;">
<div class="outbox"></div>
<script>tester();</script>
</body>
</html>
[CSS]
.container {
width: 400px;
height: 200px;
border: 1px solid black;
}
.container .viewport {
width: inherit;
height: inherit;
position: absolute;
overflow: auto;
}
.container .viewport .canvas{
display: -ms-flexbox;
-ms-flex: 0 0 auto;
-ms-flex-pack: start;
-ms-flex-flow: row none;
-ms-flex-align: start;
-ms-flex-item-align: start;
-ms-flex-line-pack: start;
position: relative;
}
.container .viewport .canvas .item {
width: 100px; height: 100px;color: #fff;
background-color: black;
margin: 10px;
}
[JAVASCRIPT]
(function tester(){
var canvas = document.querySelector('.canvas');
var style = document.defaultView.getComputedStyle(canvas, null);
function addToOutbox(str){
var outbox = document.querySelector('.outbox');
outbox.innerText = 'Width: ' + str;
}
addToOutbox(style.width);
})();
I was expecting width to be something else as there is a scroll bar.
Outer container width is 400px, middle one is inheriting width and height with overflow: auto and inner most is expandable.
There are eight items in flexbox with width and height 100px each. So I was expecting the flexbox width abot 900px (i.e. 100px*8 + margin-left and margin-right for each item) but still getting 400px only which is parent dimensions. Am I missing something?
Here is the link to JS Fiddle: http://jsfiddle.net/pdMSR/ [Open with ie10 only]
The element really is 400px. The flex items that are positioned past 400px are actually overflowing.
It sounds like what you are really trying to get is the scrollWidth. If you pass in canvas.scrollWidth to your addToOutbox function you'll get what you are looking for.