I want to create sticky bottom toolbar that always stays at the bottom. It always should be visible on a screen. I tried to use position: fixed, bottom: 0 which definitely helped, but it overlaps my content. Here is how it overlaps (look at the bottom of the page):
Yes, I understand that it should overlap, but the problem is that I cannot scroll to bottom to see remaining text.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.bottom-toolbar {
position: fixed;
bottom: 0;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="article">
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
</div>
<div class="bottom-toolbar">
<p> My toolbar </p>
</div>
</div>
</body>
</html>
How can I solve this problem?
The footer is on top of the layer with the article text, so you can solve it by "making room" with some padding:
.article {
padding-bottom: 40px;
}
40px; is just enough in a codepen, but add however much you want.
position: fixed; always relative to viewport
or, you can also use margin bottom to .article or padding-bottom: 60px (or your fotter-bar height) to .container.
if choose to give margin, do in .article
or, if choose to give padding, do it in .container or body (bcz fixed positioned is relative to viewport & after container if any other div comes)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.bottom-toolbar {
position: fixed;
bottom: 0;
width: 100%;
background-color: yellow;
}
.article {
margin-bottom: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="article">
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
<p>Lorem ipsum... Lorem....(a lot of text here)</p>
</div>
<div class="bottom-toolbar">
<p> My toolbar </p>
</div>
</div>
</body>
</html>
Related
I am trying to make a side-by-side table with 2 divs column, that contains many <p> elements inside.
That would be easy if these two Divs and their contents are horizontal, but in this case, they are vertical, two sides' heights are not the same.
Is there any way to do it without using JavaScript?
*EDIT:
The reason I put two separate divs side by side is that I put new content to them using JavaScript Prepend.
On the left side are the English texts, and on the right side are translated texts.
It would be easier for me if the English texts were together inside a div and the same for the translated texts.
I have done it by using Javascript and setting one side's style. height = the other side's clientHeight, it would be much better if I was able to do this with only CSS and HTML
for (let i = 0; i < document.querySelectorAll('#div1 p').length; i++) {
document.querySelectorAll('#div1 p')[i].style.height = "auto";
document.querySelectorAll('#div2 p')[i].style.height = "auto";
if (document.querySelectorAll('#div1 p')[i].clientHeight > document.querySelectorAll('#div2 p')[i].clientHeight )
{
document.querySelectorAll('#div2 p')[i].style.height = document.querySelectorAll('#div1 p')[i].clientHeight-3+'px'
}
else
{
document.querySelectorAll('#div1 p')[i].style.height = document.querySelectorAll('#div2 p')[i].clientHeight-3+'px'
}
}
body {
font-family: Consolas,Menlo,"courier new",monospace;
font-size: 18px;
}
.grid-container {}
#div1{
width: 50%;
display: table-cell;
}
#div2{
width: 50%;
display: table-cell;
}
p{
margin-top: 0px;
padding-bottom: 3px;
padding-left: 3px;
margin-bottom: 6px;
border-bottom: 1px dashed #0000ff00;
border-color: gray;
}
<div class="grid-container">
<div id="div2" class="skiptranslate">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p> the second cell</p>
<p> the 3rd cell </p>
<p> the 4th cell </p>
</div>
<div id="div1" >
<p> I want this cell's height same as the left "lorem ipsum" cell </p>
<p> the second cell</p>
<p> the 3rd cell</p>
</div>
</div>
Here how i would do it, with rows taking 100% and cells taking 50%
.cell {
width: 50%
}
.row {
width: 100%;
height: auto;
display: flex;
margin-top: 0px;
padding-bottom: 3px;
padding-left: 3px;
margin-bottom: 6px;
border-bottom: 1px dashed #0000ff00;
border-color: gray;
}
body {
font-family: Consolas, Menlo, "courier new", monospace;
font-size: 18px;
}
<div class=" grid-container">
<div class="row">
<div class="cell">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
</div>
<div class="cell">
<p> I want this cell's height same as the left "lorem ipsum" cell </p>
</div>
</div>
<div class="row">
<div class="cell">
<p> the second cell</p>
</div>
<div class="cell">
<p> the second cell</p>
</div>
</div>
<div class="row">
<div class="cell">
<p> the 3rd cell </p>
</div>
<div class="cell">
<p> the 3rd cell </p>
</div>
</div>
<div class="row">
<div class="cell">
<p> the 4th cell </p>
</div>
<div class="cell"></div>
</div>
</div>
just to add to LK77s good answer - is there any reason why you can't just use a <table> element here? That's the simplest solution.
failing that, a more modern solution is to refactor the HTML to take out the column divs, then you could use display: flex or display: grid to accomplish this:
.flex-table {
display: flex;
flex-wrap: wrap;
width: 600px;
border: 1px solid;
}
.flex-table p {
margin: 0;
flex: 0 0 50%;
max-width: 50;
}
.grid-table {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 600px;
border: 1px solid;
}
.grid-table p {
margin: 0;
padding: 5px;
}
/**
Just to show the different columns
**/
.table p:nth-child(2n) {
background-color: rgba(255,0,0,.5);
}
<div class="flex-table table">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum second cell</p>
<p>Lorem ipsum third cell</p>
<p>Lorem ipsum fourth cell</p>
<p>Lorem ipsum fifth cell</p>
<p>Lorem ipsum sixth cell</p>
</div>
<div style="margin-bottom: 30px"></div>
<div class="grid-table table">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum second cell</p>
<p>Lorem ipsum third cell</p>
<p>Lorem ipsum fourth cell</p>
<p>Lorem ipsum fifth cell</p>
<p>Lorem ipsum sixth cell</p>
</div>
I have this layout: https://postimg.org/image/74ioib3y7/
The rules of the game are:
The container must be at least 210px wide and 85px high
Row1 should be able to grow as wide as it needs to and wrap words only when the container is as big as its container
Row2 has to be as wide as Row1 => it should wrap words and not stretch the container when the content of Row2 is wider than the content of Row1
I have managed to do everything except 3.
EDIT: JSFiddle
IGNORe THIS MUST HAVE IT TO PASTE JSFiddle
Please help
This should solve your request:
.container {
display: inline-block;
background: aliceblue;
min-width: 210px;
min-height: 85px;
position: relative;
}
.maxim {
position: absolute;
width: 100%;
max-width: 100%;
background-color: lime;
}
<div class="container">
<header>
<strong>12345620</strong>
<span>description</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
<div class="container">
<header>
<strong>1234567890</strong>
<span>description and more text is here also possible</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
I have tried to assign a 100% of the parent to a fixed div but is taking the 100% of the screen.
I prepared the code here
http://codepen.io/rodboc/pen/ZOOEWp
HTML
<div id="wrapper">
<div class="box">
<div class="header">
<p>Header</p>
</div>
<div class="content">
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
</div>
</div>
</div>
CSS
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
padding: 10px;
}
#wrapper .box {
width: 100%;
}
#wrapper .header {
width: inherit;
position: fixed;
background: #2ecc71;
}
#wrapper .content {
width: inherit;
background: #27ae60;
}
if a define the width for the parent in px works, but I can't do that, should be in 100%
It's pretty simple actually, move the header outside the box div.
body, html {
margin: 0;
width: 100%
}
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
padding: 10px;
}
#wrapper .box {
background: lime;
}
#wrapper .header {
width: inherit;
position: fixed;
background: #2ecc71;
}
#wrapper .content {
background: #27ae60;
}
<div id="wrapper">
<div class="header">
<p>Header</p>
</div>
<div class="box">
<div class="content">
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
</div>
</div>
</div>
body, html {
width: 100%
}
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
}
#wrapper .box {
width: 100%;
max-width: 238px;
margin: 10px;
background: lime;
}
#wrapper .header {
width: 100%;
position: fixed;
background: #2ecc71;
max-width: inherit;
}
#wrapper .content {
width: 100%;
background: #27ae60;
}
<div id="wrapper">
<div class="box">
<div class="header">
<p>Header</p>
</div>
<div class="content">
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
</div>
</div>
</div>
Fixed position elements is not relative with its parent anymore.
Based on the documentation :
position:fixed MDN
Fixed Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page. This value always create a new stacking context.
One way to fix this is to the max-width of parent and let the child inherit it.
So in your case it should be the same on the snippet i attached.
This might solve your issue, change the styling of the header class like this:
#wrapper .header {
width: 100%;
position: fixed;
background: #2ecc71;
max-width:calc(100% / 3);
}
Check out if it could do for you:
http://output.jsbin.com/jaxasikose/
Okay here is how you fix it with a clean code:
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
padding: 10px;
}
#wrapper .box {
width: 100%;
position: relative;
}
#wrapper .header {
width: 100%;
position: absolute;
background: #2ecc71;
}
#wrapper .content {
width: 100%;
overflow: auto;
background: #27ae60;
}
I have a parent element that has 2 children. I want to move 1st child to top, and second one to bottom. The parent element has a scroll and its children size isn't fixed. Children size expands dynamically depending on theirs content
So If theirs size are smaller than parent's one they would look like in the left picture, else they should expand parents div like in the right picture. Usually to move element to edges I'd use absolute position like this:
.parent {
position: relative;
}
.top-child {
position: absolute;
top: 0;
}
.bottom-child {
position: absolute;
bottom: 0;
}
But this case brakes the flow. Parent width and height wouldn't adjust depending by children size. Another solution is to use vertical-align
.parent {
display: table-cell;
vertical-align: bottom;
}
But in this scenario all children would move to bottom.
Here's jsfiddle. Green background is parent. topdiv and bottomdiv and childrens.
How should I CSS divs to attach children to edges without breaking the flow?
you can achieve this use display:table and table-row:
#scroller {
height:300px; /* this height is the min height before you want to scroll */
overflow:auto;
}
.table {
min-height:100%;
width:100%;
display:table;
}
.row {
display:table-row;
}
.row:first-child {
height:100%; /* this is needed to "push" the second row to the bottom (it will actually be 100% minus the bottom row height */
background:blue;
}
.row:last-child {
background:green;
}
<div id="scroller">
<div class="table">
<div class="row">expands to fill space</div>
<div class="row">stays at bottom</div>
</div>
</div>
Example fiddle
Fiddle with content and scrolling
Update
Applying my styles to your fiddle
Something like this?
.main {
width: 300px;
height: 300px;
overflow-y: auto;
border: 1px solid #999;
margin-bottom: 30px;
}
.parent {
min-height: 100%;
display: flex;
flex-direction: column;
}
.child-a {
flex: 1;
background: #ccc;
}
.child-b {
background: #ddd;
}
<div class="main">
<div class="parent">
<div class="child-a">
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
</div>
<div class="child-b">
<p>Amet ipsum dolor</p>
</div>
</div>
</div>
<div class="main">
<div class="parent">
<div class="child-a">
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
</div>
<div class="child-b">
<p>Amet ipsum dolor</p>
</div>
</div>
</div>
I'm building a Single-Page layout with a navigation for scrolling to several anchors (anchor locks on top of the page - height of the header). The scrolling content is only structured in headlines <h3> and paragraphs <p>. Works well so far, but the last section of the page is quite short, so it gets stuck on the page's bottom and has not enough "space/content" to even arrive at the top of the page.
Does anyone know a way to extend the very last <p> to the browser's height (- the header's height), so that it can reach the top?
CSS-only would be great, jQuery is fine aswell.
Thanks!
From your description you seem to have something like this, where I'm giving your "scrolling content" area an id of application-body like this:
<div id="application-body">
<h3 id="n-1">Headline 1</h3>
<p>Lorem ipsum </p>
<h3 id="n-2">Headline 2</h3>
<p>Lorem ipsum </p>
<h3 id="n-3">Headline 3</h3>
<p>Lorem ipsum </p>
<h3 id="n-4">Headline 4</h3>
<p>Lorem ipsum </p>
<h3 id="n-5">Headline 5</h3>
<p>Lorem ipsum </p>
<h3 id="n-6">Headline 6</h3>
<p>Lorem ipsum </p>
<h3 id="n-7">Headline 7</h3>
<p>Lorem ipsum </p>
<h3 id="n-8">Headline 8</h3>
<p>Lorem ipsum </p>
<h3 id="n-9">Headline 9</h3>
<p>Lorem ipsum </p>
<h3 id="n-10">Headline 10</h3>
<p>Lorem ipsum </p>
<h3 id="n-11">Headline 11</h3>
<p>Lorem ipsum </p>
</div><!--#application-body-->
And you want to make the last element in that list - the last <p> element in this case, artificially taller so it will work correctly. If I'm not mistaken I think what you want is this:
#application-body p:last-child {
color: red;
height: 1000px;
}
Which will increase the height arbitrarily as you see fit. Not sure what the constraints of your page are, but you could also experiment with other units. I don't think percentage height will do what you intend though. em might work as well. You might also consider setting the height with a media query so that if the height was not very tall you could set it lower.
Here's more about :last-child
If you simply must use jQuery or must get precise about the height you want, you'd want to use this chunk of jQuery. Note that your header must have an id of header for this code to work. Adjust to your own site.
var targetHeight = $(window).height() - $('#header').height();
$('#application-body p:last-child').height(targetHeight);