I need to have div border responsive. However, as you can see .buttonsDiv needs to be at the bottom and wrapper border needs to be stretched underneath .buttonsDiv. But when I use this code buttons are at the bottom but border stays at the top. I can't use margin because content div contains elements that are shown/hidden and the page needs to be fixed aka disabled scrolling.
html
.wrapper {
border: 1px solid black;
}
.buttonsDiv {
position: fixed;
bottom: 10px;
}
<div class="wrapper">
<div class="borderedDiv">Content</div>
<div class="buttonsDiv">Butons</div>
</div>
Put position: absolute; to the parent and define top, bottom, left, right as 0;
PS: This solution will not add scroll bar which appears if you put height 100vh
.wrapper {
border: 1px solid black;
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0
}
.buttonsDiv {
position: fixed;
bottom: 10px;
}
<div class="wrapper">
<div class="borderedDiv">Content</div>
<div class="buttonsDiv">Butons</div>
</div>
Its hard to understand what you are after. Do you mean something like this?
html, body{
margin: 0;
padding: 0;
}
.wrapper{
height: 100vh;
width: 100vw;
padding: 10px;
box-sizing: border-box;
}
.inner_wrap{
position:relative;
width: 100%;
height: 100%;
border: 1px solid black;
box-sizing: border-box;
}
.buttonsDiv{
position: absolute;
bottom: 10px;
}
<div class="wrapper">
<div class="inner_wrap">
<div class="borderedDiv">Content</div>
<div class="buttonsDiv">Butons</div>
</div>
</div>
To add to the previous answer:
.wrapper {
border: 1px solid black;
height: 100vh;
}
.buttonsDiv {
position: absolute;
bottom: 1px;
}
<div class="wrapper">
<div class="borderedDiv">Content</div>
<div class="buttonsDiv">Butons</div>
</div>
The wrapper doesn't need an position: relative, position static will do fine.
With the position absolute of the button div you place the element relative to its parent element. Therefore if we put .buttonsDiv to bottom:1px it will stick to the bottom of the element.
Related
Why my nested sticky element with left: 0 does not stick while the nested element with top: 0 sticks normally?
.scroll {
width: 200px;
height: 200px;
border: 1px solid;
overflow: auto;
}
.container {
width: 600px;
height: 1000px;
}
.sticky-left {
position: sticky;
left: 0;
}
.sticky-top {
position: sticky;
top: 0;
}
<div class="scroll">
<div class="sticky-top">sticky-top</div>
<div class="sticky-left">sticky-left</div>
<div class="container">
<div class="sticky-top">sticky-top-nested</div>
<div class="sticky-left">sticky-left-nested</div>
</div>
</div>
Let's add some border and we will clearly see what is happening:
.scroll {
width: 200px;
height: 200px;
border: 1px solid;
overflow: auto;
}
.scroll > div {
border:2px solid green;
}
.container {
width: 600px;
height: 1000px;
border:2px solid red!important;
}
.container > div {
border:2px solid green;
}
.sticky-left {
position: sticky;
left: 0;
}
.sticky-top {
position: sticky;
top: 0;
}
<div class="scroll">
<div class="sticky-top">sticky-top</div>
<div class="sticky-left">sticky-left</div>
<div class="container">
<div class="sticky-top">sticky-top-nested</div>
<div class="sticky-left">sticky-left-nested</div>
</div>
</div>
As you can see, the nested sticky elements are both having their width equal to parent width (since they are block element) so there is no room for the left-sticky to have any sticky behavior1 since it has width:100% unlike the top one that can still stick because its height is less that the parent height.
For the non-nested elements I think it's clear.
Make the element inline-block or reduce the width and you will have a sticky behavior:
.scroll {
width: 200px;
height: 200px;
border: 1px solid;
overflow: auto;
}
.scroll > div {
border:2px solid green;
}
.container {
width: 600px;
height: 1000px;
border:2px solid red!important;
}
.container > div {
border:2px solid green;
width:150px;
}
.sticky-left {
position: sticky;
left: 0;
}
.sticky-top {
position: sticky;
top: 0;
}
<div class="scroll">
<div class="sticky-top">sticky-top</div>
<div class="sticky-left">sticky-left</div>
<div class="container">
<div class="sticky-top">sticky-top-nested</div>
<div class="sticky-left">sticky-left-nested</div>
</div>
</div>
1 A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.ref
In your case you were always meeting the opposite edge.
As per the MDN documentation on position: sticky, the top, right, bottom, and left properties determine the final location of positioned elements. My guess is that in order for it to be stickied from the top, it needs to also contain top: 0. The snippet I added seems to work.
.scroll {
width: 200px;
height: 200px;
border: 1px solid;
overflow: auto;
}
.container {
width: 600px;
height: 1000px;
}
.sticky-left {
position: sticky;
left: 0;
top: 0; // Add this so it sticks to top
}
.sticky-top {
position: sticky;
top: 0;
}
<div class="scroll">
<div class="sticky-top">sticky-top</div>
<div class="sticky-left">sticky-left</div>
<div class="container">
<div class="sticky-top">sticky-top-nested</div>
<div class="sticky-left">sticky-left-nested</div>
</div>
</div>
I have two divs. outer div taking 25%. And the inner div is placed at the bottom (position: fixed; bottom: 0; width: 25%; border-top: 1px solid red) But this is not taking 25%.
I am adding border for this div. So there is an white space is showing because of the width.
HTML:
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2">
<div id="inner-div"></div>
</div>
</div>
</div>
CSS:
#main-div{
height: 100%;
width: 100%;
display: table;
}
#outer-div {
width: 100%;
}
#div-1, #div-2 {
width: 100%;
}
#inner-div {
position: fixed;
bottom: 0; width: 25%;
border-top: 1px solid red;
}
How to apply exactly apply 25% width to inner-div which has position fixed ?
UPDATE Added js fiddle in comment
Remove your body margin . This issue because of you don't remove your body margin you can simply fix this
body {
margin:0;
}
body {
margin:0;
}
#main-div{
height: 100%;
width: 100%;
display: table;
}
#outer-div {
width: 100%;
}
#div-1, #div-2 {
width: 100%;
}
#inner-div {
position: fixed;
bottom: 0; width: 25%;
border-top: 1px solid red;
}
<body>
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2">
<div id="inner-div"></div>
</div>
</div>
</div>
</body>
The real reason why inner-div has more width than outer-div is because inner-div has position: fixed applied to it.
Now when you apply position: fixed, it makes the element position relative to the viewport.
So, in this case inner-div is relative to the body which has some user-agent margin styles applied. To make them have same width apply margin: 0 to the body.
Also, apply box-sizing: border-box to outer-div to exclude the border in the width.
I have updated the fiddle for you. So both divs have the same width.
https://jsfiddle.net/nashcheez/uur2h5w3/4/
Fixed position is relative to the browser window hence percentage values will be relative to the <html> element (http://www.w3schools.com/cssref/pr_class_position.asp). Although experimental position:sticky might accomplish what you need since it is relative to the viewport (parent relative element).
You can use below css for this
#inner-div {
box-sizing: border-box;
}
You can check updated fiddle
You need to reset body for browser. For this reason "inner-div" is taking space.
body{margin:0;padding:0;}
body{margin:0;padding:0;}
#main-div{
height: 100%;
width: 100%;
display: table;
background: blue none repeat scroll 0 0;
border: 1px solid blue;
}
#outer-div {
width: 25%;
border: 1px solid green;
}
#div-1 {
width: 100%;
}
#div-2 {
display: table;
height: 0;
padding-right: 2px;
width: 100%;
}
#inner-div {
text-align: center;
position: fixed;
bottom: 0;
width: 25%;
border-top: 1px solid red;
padding-bottom: 27px;
padding-top: 10px;
}
<div id="main-div">
<div id="outer-div"> //list
<div id="div-1"> //parent-scrol
<div id="div-2"> //scroll
<div id="div-3"> //inner-list
<div id="inner-div">wefffef</div> //create-new
</div>
</div>
</div>
</div>
</div>
The relative and absolute positioning are great tools, but they take elements out of the flow and this leads to some restrictions in their use. I think I just encountered one of them but I'd love someone to prove me wrong.
To state it clearly: I have a div positioned relatively to its parent. The problem is, under certain conditions, this out-of-flow element can go further than the top element (e.g. the body) and add a horizontal scrollbar. Demo below:
.top-container {
width: 80%;
height: 100px;
margin: auto;
border: dashed 2px red;
}
.container {
width: 80%;
height: 50px;
margin: 25px auto;
border: dotted 1px blue;
position: relative;
}
.absolute {
width: 100%;
background-color: black;
color: white;
position: absolute;
top: 30%;
right: -50%;
}
<div class="top-container">
<div class="container">
<div class="absolute">
absolutely
</div>
</div>
</div>
My question is: is there a way to tell CSS absolutely positioned elements should not go further left or right than the borders of .top-container? Something that would behave like a sort of max-left/max-right.
(e.g. in my example, move the black div so that it does not go outside of the red dashed line)
If you decided to position the element in an exact position - you can't say that you want it to be positioned somewhere. You can use right/left margin (or position with percentages).
Another option is to use the overflow option to set the scroller on the container (or to specify that if the element is getting out of it's container it should be hidden):
.top-container {
width: 80%;
height: 100px;
margin: auto;
border: dashed 2px red;
}
.container {
width: 80%;
height: 50px;
margin: 25px auto;
border: dotted 1px blue;
position: relative;
overflow: auto;
}
.hidden-overflow {
overflow: hidden;
}
.absolute {
width: 100%;
background-color: black;
color: white;
position: absolute;
top: 30%;
right: -50%;
}
<div class="top-container">
<div class="container">
<div class="absolute">
absolutely
</div>
</div>
</div>
<div class="top-container">
<div class="container hidden-overflow">
<div class="absolute">
absolutely
</div>
</div>
</div>
Hi — is it possible to have a div with it's height equal to a fluid width expand to contain its content within a narrow viewport?
I figured out a work around with a solid colour div: http://jsfiddle.net/2nprw0xq/
But not with a border: http://jsfiddle.net/534k9e2n/
Here's the code I'm using. Thanks, B.
<div class="holder">
<div class="shape"></div>
<div class="shape_outer">
<div class="shape_inner"> Text... </div>
</div>
</div>
.
.holder {
display: inline-block;
position: relative;
width: 50%;
}
.shape {
margin-top: 100%;
}
.shape_outer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid #111;
}
.shape_inner {
padding: 20px;
}
Move border to your inner element and then add 100% width and 100% min-height, like this:
.shape_inner {
border: 1px solid #111;
padding: 20px;
min-height: 100%;
width: 100%;
}
Check it out: http://jsfiddle.net/534k9e2n/1/
Ok so I've got a header and a footer with absolute positioning and heights of 144px. The content div in the middle area needs to be the full height of the area in between.
Simplified:
<style>
.marginals{
position: absolute;
height: 144px;
width: 100%;
left: 0;
}
#header{ top: 0px; }
#footer{ bottom: 0px; }
</style>
<div id="header" class="marginals"></div>
<div id="content"> Content </div>
<div id="footer" class="marginals"></div>
So basically I want a div that is 100% - 288px. At first I thought I could just make a 100% x 100% div with 144 padding on top and bottom and then stuff the content div in there at 100% but my thinking has gone stray somewhere.
Here's an example I made using 20% height for 'bread layers'. (Which I can't do on this project) Used 60% height for the scrolling 'meaty layer' and put it at top: 20%;
What you have won't work, tables and absolute positioning don't go well together, and height on table rows and cells is not handled consistently across browser anyway so I think you'd find it hard to get the top/bottom rows to stay a fixed height while still asking the middle row to scroll
however I think you were right with your original posting and using absolute positioning, you don't need percentages though, you can use the top and bottom co-ordinates tohether, so you can tell the middle div to start at 144px from top and finish 144px from bottom..
e.g.
HTML:
<div class="header">Some header content</div>
<div class="wrap">
Bulk content<br>bulk content<br>bulk content<br>bulk content<br>
Bulk content<br>bulk content<br>bulk content<br>bulk content
</div>
<div class="footer">Some footer content</div>
CSS:
html, body {margin: 0; padding: 0; height: 100%; overflow: hidden;}
.wrap {
position: absolute;
left: 0;
top: 144px; /* = height of header including any borders or padding */
bottom: 144px; /* = height of footer including any borders or padding */
width: 100%;
background: #fff;
overflow: auto;
}
.header, .footer {
position: absolute;
width: 100%;
left: 0;
height: 140px;
background: #f00;
}
.header {
top: 0;
border-bottom: 4px solid #000;
}
.footer {
bottom: 0;
border-top: 4px solid #000;
}
The whole thing is based on the html, body elements having the height of 100% set
Example: here
Looks like you're trying to create a 3 liquid row-layout. Why not try something like this:
Fiddle: http://jsfiddle.net/jCjsD/2/
HTML
<body>
<div id="body_container">
<div id="header">Some header content</div>
<div id="content"><!-- Bulk content here !--></div>
</div>
<div id="footer">Footer</div>
</body>
CSS
#header, #content, #footer {
float: left;
width: 100%;
}
#header {
border-bottom: 1px solid #888;
background: yellow;
}
#footer {
border-top: 1px solid #888;
background: yellow;
}
#content {
clear: both;
padding-bottom: 50px;
}
#footer {
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#body_container {
min-height: 100%;
}