Can anyone please help me to fill the width of parent container and stretch it all the way to bottom without overflowing. Here is jsfiddle
http://jsfiddle.net/vn50gka2/1/#&togetherjs=p1VVmrhCtA
.toolbar {
position: absolute;
height: 50px;
width: 100%;
top: 0;
left: 0;
background-color: green;
}
.layout {
height: 100%;
width: 400px;
margin: 60px auto
}
.container {
display: flex;
flex: 1;
flex-direction: column;
background-color: red;
}
Container is the div I'm trying to fix. The toolbar and layout can not be changed. And also just because I want to reuse the container I really wish to not use any calculation or any hardcoded height numbers.. I don't know if this is possible
$(document).ready(function(){
var toolbarheight = $(".toolbar").height();
var windowheight = $(this).height();
var divheight = windowheight - toolbarheight -10;
console.log(divheight)
$(".mydiv").height(divheight);
})
*{
margin:0;
paddin:0;}
.toolbar {
position: fixed;
height: 50px;
width: 100%;
top: 0;
left: 0;
background-color: green;
}
.layout {
margin-top: 60px;
height: 100%;
width: 100%;
}
.container {
width: 100%;
display: flex;
flex: 1;
flex-direction: column;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toolbar">
Toolbar
</div>
<div class="layout">
<div class="container mydiv">
<div>
stretch to bottom without overflow
</div>
</div>
</div>
well this full height for ur div using jquery!
added -10 is difference between your toolbar height and your layout top margin!
Related
I want to center a div and it's text, in a 100%-screen-width div, which is in a smaller wrapper.
.wrapper {
height: 800px;
width: 900px;
margin: auto;
background-color: #000000;
}
.box-wrapper {
width: 1000%;
position: relative;
left: -500%;
background-color: #FF6600;
}
.box {
background-color: #FF0000;
width: 600px;
position: relative;
left: 50%;
color: #00FF00;
}
span {
text-align: center;
display: block;
}
<div class="wrapper">
Random text for wrapper-div
<div class="box-wrapper">
<div class="box">
<span>ABC</span>
<span>DEF</span>
<span>GHI</span>
</div>
</div>
</div>
This code is kind of working but not perfect.
The red div should be moved a bit to the right, also the way
of doing it is not the best in my opinion.
I want a more robust and responsive solution.
To be more clear, it's for the pink division on the bottom
of this website: http://ndvibes.com
There the code is working 99% of the times and reponsive. But on some computers/screens it's 50% off. So I want a less-hacky (without transform etc) and more standard, robust way of getting that effect.
Wrapper 900px > 100%-screen-width coloured div > Centered text in that coloured div.
How can I achieve this the best as possible?
Thanks!
How about this approach, using absolute positioned pseudo elements. The outer-space div with overflow:hidden is to prevent a horizontal scroll bar appearing. I have added padding-top to the .wrapper just so you can see the snippet running in full screen mode.
body {
margin:0;
}
.outer-space {
overflow: hidden;
padding-top:80px;
}
.wrapper {
height: 800px;
width: 100%;
max-width: 900px;
margin: auto;
background-color: #000000;
}
.box {
background-color: #8904B1;
margin:0 auto;
color: #ffffff;
position: relative;
z-index: 2;
padding:10px 0;
}
.box-wrapper {
position: relative;
width:100%;
max-width: 600px;
margin:0 auto;
}
.box-wrapper:before, .box-wrapper:after {
content:"";
position: absolute;
height:100%;
width:100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.box-wrapper:before {
left:-100%;
}
.box-wrapper:after {
right:-100%;
}
span {
text-align: center;
display: block;
}
<div class="outer-space">
<div class="wrapper">
Random text for wrapper-div
<div class="box-wrapper">
<div class="box">
<span>Crazy full width window</span>
<span>absolute positioned pseudo elements</span>
<span>with centered content div and centered text thingy</span>
<span>all inside of a fixed width page wrapper!</span>
<br><span>““”̿ ̿ ̿ ̿ ̿’̿’̵͇̿̿з=(•̪●)=ε/̵͇̿̿/̿ ̿ ̿ ̿ ̿’““</span>
</div>
</div>
</div>
</div>
To center child element, add the following to the parent wrap will center all child.
display: flex;
align-items: center;
justify-content: center;
If you want 100% screen width, use viewport (100vw) for 100% screen width
viewport
The #viewport CSS at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
REF: #viewport
REF: Viewport Sized Typography
body {
margin: 0;
}
.wrapper {
height: 800px;
width: 900px;
margin: auto;
background-color: #000000;
}
.box-wrapper {
width: 900px;
max-width: 900px;
position: relative;
background-color: #FF6600;
display: flex;
align-items: center;
justify-content: center;
}
.outer-wrapper {
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 80%;
background-color: #FF0000;
position: relative;
color: #00FF00;
}
span {
text-align: center;
display: block;
}
<div class="outer-wrapper">
<div class="wrapper">
<p>Random text for wrapper-div</p>
<div class="box-wrapper">
<div class="box">
<span>ABC</span>
<span>DEF</span>
<span>GHI</span>
</div>
</div>
</div>
</div>
It seems so simple, but I wrap my mind about it and googled a lot but couldn't find an answer:
Container with two vertical rows, one has height defined in pixels (header), and the other has image that should stretch as much as remaining height (slider div). The problem is that this height of header is dynamic (as in unknown) and we can't use that value in defining CSS of container or slider div.
How do I solve it without javascript?
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
section {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400px;
background: green;
}
#slider {
height: 100%; /* this is wrong; how to set height to stretch element? */
}
img {
width: 100%;
height: 100%;
}
Header is set to 40px just for the sake of the example. It could be any other value, but the CSS definition of other elements shouldn't be aware of that, because it's dynamically loaded 3rd party component with inline CSS.
Also, slider div is a complex slider (Swiper) that renders code with bunch of nested divs but I need to use exactly that one.
But this DOM structure should be rough sketch of my case.
Example is here: https://jsfiddle.net/snaokLxd/3/
Set the parent to flex with #slider set to flex-grow: 1 (or flex: 1 0 0 for short)
section {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400px;
background: green;
display: flex;
flex-direction: column;
}
#slider {
flex: 1 0 0;
}
img {
width: 100%;
height: 100%;
vertical-align: top;
}
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
Flex example below:
* {
margin: 0;
}
section {
height: 100vh;
width: 400px;
background: green;
display: flex;
flex-direction: column;
}
#slider {
flex-grow: 2;
}
img {
display: block;
width: 100%;
height: 100%;
}
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
Also on JSFiddle.
Trying to make an empty state placed below an app-header. I want it to take the full width and full height (minus the height of the app-header) of the entire screen.
So far, I have this, but it doesn't seem to work:
<app-header-layout>
<app-header>
.....
</app-header>
<div id="empty-state" style="width: 100%; height: 100%; background: #F00; white-space: nowrap;">
.....
</div>
</app-header-layout>
Still no go. The empty state has the full width that I want, but not the height that I want.
Please help me out.
There's a couple way to do this. You can use a flex-box (explained here):
body,
html {
height: 100%;
}
body {
margin: 0px;
display: flex;
flex-direction: column;
}
app-header {
min-height: 50px;
}
#empty-state {
overflow: auto;
background: #F00;
flex-grow: 1;
overflow: auto;
}
<body>
<app-header>...</app-header>
<div id="empty-state">
.....
</div>
</body>
You can also simply absolutely position your elements. Simply account for the height of app-header and offset #empty-state by this height. Like this:
body,
html {
height: 100%;
}
body {
margin: 0;
}
app-header {
width: 100%;
height: 50px;
}
#empty-state {
position: absolute;
top: 50px;
bottom: 0;
background: #F00;
width: 100%;
}
<app-header-layout>
<app-header>
.....
</app-header>
<div id="empty-state">
.....
</div>
</app-header-layout>
Is there a way for stickies to take into account other stickes on the page?
For example:
body {
display: flex;
min-height: 2000px;
flex-direction: column;
}
#header {
height: 40px;
flex: 0 0 auto;
position: sticky;
top: 0;
background: yellow;
}
#footer {
flex: 0 0 auto;
height: 20px;
}
#main {
display: flex;
flex: auto;
background: blue;
}
#side {
width: 200px;
background: red;
}
#side > div {
position: sticky;
top: 0px;
}
<div id="header">header</div>
<div id="main">
<div id="side">
<div>side</div>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">footer</div>
Notice that if I scroll down the header will overlap the sidebar because they have the same top position.
To fix I have to make the top position of the sidebar take the value of the header height
body {
display: flex;
min-height: 2000px;
flex-direction: column;
}
#header {
height: 40px;
flex: 0 0 auto;
position: sticky;
top: 0;
background: yellow;
}
#footer {
flex: 0 0 auto;
height: 20px;
}
#main {
display: flex;
flex: auto;
background: blue;
}
#side {
width: 200px;
background: red;
}
#side > div {
position: sticky;
top: 40px;
}
<div id="header">header</div>
<div id="main">
<div id="side">
<div>side</div>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">footer</div>
But what if the header has variable height? Can I tell the browser somehow to position the stickies so they dont overlap others?
I think you would need to use javascript for this. First to get the height of the header and then set the top position of your side div using that value. I am not aware of any pure css way of doing it I am afraid.
If you are using jQuery it is simply using the .height() method if not you can use this:
var clientHeight = document.getElementById('myDiv').clientHeight;
var offsetHeight = document.getElementById('myDiv').offsetHeight;
The offset method gets the height with any padding and borders.
I have 3 columns below the header. They are Left Side bar,content and Right side bar.
i want the height of the columns to increase according to the height of the tallest column.
For Example, If one of the columns is 400 px in height, i want the remaining two columns to have the same height.
I tried lot of css code but none of them work.
Can someone Please show me the required CSS code to get the above layout..??
Thank You.
There are so many options, this is one of them.
http://jsfiddle.net/7cc6m/1/
HTML:
<div id="header"></div>
<div id="main">
<div id="left" class="sidebar"></div>
<div id="content"></div>
<div id="right" class="sidebar"></div>
</div>
<div id="footer"></div>
CSS:
body, html {
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
}
#header, #footer {
position: absolute;
height: 100px;
left: 0px;
right: 0px;
}
#footer{ bottom: 0px; }
#left.sidebar, #content, #right.sidebar {
position: absolute;
top: 100px;
bottom: 100px;
}
#left.sidebar {
left: 0px;
width: 200px;
}
#right.sidebar {
right: 0px;
width: 200px;
}
#content {
left: 200px;
right: 200px;
}
CSS3
You can now use the flex-box attribute like this: http://jsfiddle.net/7cc6m/8/
#main {
display: -webkit-flex;
display: -ms-flex;
display: flex-box;
}
.sidebar {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: #e8e8e8;
padding: 10px;
}
#content{
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background: #dedede;
padding: 10px;
}
There is at least few methods.
Add add an new div as a container for "left" "center" "right" with overflow hidden and for your 3 divs set padding-bottom: 20000px; margin-bottom: -20000px;