I am trying to make a content slider with a chatbox to the side and a footer stuck to the bottom.
Here is a diagram of what I am trying to achieve:
The problem with below code is that the chatbox is the height of the page. I want the chat box to stop at the footer so that it is the height of the page -60px.
And here is what I have so far:
body {
margin: 0;
}
.wrapper {
background: #95a5a6;
display: table;
height: 100vh;
width: 100%;
}
.wrapper-inner {
display: table-cell;
padding-left: 300px;
padding-bottom: 60px;
vertical-align: middle;
text-align: center;
}
.chatbox {
background: #bdc3c7;
min-height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
z-index: 2;
}
.footer {
background: #2c3e50;
bottom: 0px;
height: 60px;
position: absolute;
width: 100%;
z-index: 1;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner">Content</div>
</div>
<div class="footer"></div>
https://jsfiddle.net/bjxsyve7/4/
Here's a simplified version using only flex and calc():
body {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.chatbox {
flex: 0 0 300px;
height: calc(100vh - 60px);
overflow-y: auto;
background-color: #bdc3c7;
}
.content {
flex: 1;
background-color: #95a5a6;
}
.footer {
flex-basis: 100%;
height: 60px;
background: #2c3e50;
}
<div class="chatbox"></div>
<div class="content">Content</div>
<div class="footer"></div>
jsFiddle
You can use CSS calc() to achieve this. Add this min-height: calc(100% - 60px) to .chatbox. For more info about calc().
body {
margin: 0;
overflow-x:hidden;
}
.wrapper {
background: #95a5a6;
display: table;
height: 100vh;
width: 100%;
}
.wrapper-inner {
display: table-cell;
min-height: 100%;
padding-left:300px;
padding-bottom: 60px;
}
.chatbox {
background: #bdc3c7;
min-height: calc(100% - 60px);
position: absolute;
overflow-x: hidden;
overflow-y: auto;
top:0;
width: 300px;
z-index: 2;
}
.footer {
background: #2c3e50;
bottom: 0px;
height: 60px;
position: absolute;
width: 100%;
z-index: 1;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner"></div>
</div>
<div class="footer"></div>
You need only adding this:
.wrapper{
position: relative;
}
In your code the chatbox div has height 100% of the body. But if you set position: relative; to it's parent(.wrapper) it will have height 100% of it's parent.
This is an easy way to do this with flex:
body {
display: flex;
flex-direction:column;
min-height: 100vh;
}
.wrapper {
background: #95a5a6;
display: flex;
flex: 1;
}
.chatbox {
background: #bdc3c7;
overflow-x: hidden;
overflow-y: auto;
width: 200px;
}
.footer {
background: #2c3e50;
height: 60px;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner">Content</div>
</div>
<div class="footer"></div>
Related
I don't know how to center a full screen div.
I want to center a div with width: 90% and height: 90%, but when I use this code:
html,
body {
width: 100%;
height: 100%;
}
.outer {
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.inner {
height: 90%;
width: 90%;
position: relative;
top: 5%;
background: red;
margin: 0 auto;
}
<div class="outer">
<div class="inner">
</div>
</div>
I get a little bit of scroll that I don't want.
Use this:
html,body {
margin: 0;
//other codes...
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.outer {
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.inner {
height: 90%;
width: 90%;
position: relative;
top: 5%;
background: red;
margin: 0 auto;
}
<div class="outer">
<div class="inner">
</div>
</div>
What is the best way to align a fixed div within a relative div to the right, while still keeping an inherited max-width?
Update (Jan 24, 2018): I've answered this question with the solution. See here.
See the following snippet for further reference:
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
background: blue;
float: right;
color: white;
text-align: center;
right: 0;
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
A fixed element's position is always relative to the viewport/window, never to any other element.
The only thing you can do (with CSS) is to use right: calc(50% - 250px); for its position to have it right aligned to the right border of the 500px wide centered "parent" element, but that will only work if the screen is wider or equal to the max-width of the "parent" element.
Addition after comments: Plus add a media query for screens below 500px width with right: 0 (thanks to #MrLister for that)
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media (max-width: 500px) {
.box {
right: 0px;
}
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
What if you did this:
Css
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media screen and (max-width: 500px) {
.box {
right: 0;
}
}
#media screen and (min-width: 501px) {
.box {
width: 100px; /* 100px is 20% of the max-width */
}
}
Html
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
Figured something out. It can be done after all!
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
.max-width {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: lightgrey;
position: relative;
}
.box1 {
position: relative;
width: 20%;
height: 100px;
background-color: yellow;
text-align: center;
}
.container {
position: absolute;
width: 60%;
background-color: purple;
height: 100%;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.wrap-box {
position: fixed;
max-width: 500px;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.wrap-box > div.box2 {
width: 20%;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
.wrap-box > div.box3 {
width: 20%;
height: 100px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
}
<div class="max-width">
<div class="box1">position: relative, width: 20%</div>
<div class="container">
position: absolute, width: 60%
<div class="wrap-box">
<div class="box2">position: fixed (top), width: 20%</div>
<div class="box3">position: fixed (bottom), width: 20%</div>
</div>
</div>
</div>
I want to make a header with a centered textbox in it but can't seem to center it. I know countless similar questions have been asked but I can't wrap my head around how I would do it with the textbox on top of the image.
Does anyone here have a solution? I prefer using flex.
In the code snippet I'm trying to center the red box.
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back {
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
margin-left: 25%;
margin-top: auto;
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back {
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
left: 50%; /* center horizontally */
top: 50%; /* center vertically */
transform: translate(-50%,-50%) /* tweak for precise centering; details:
http://stackoverflow.com/q/36817249 */
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
here is another answer jsfiddle 1
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back{
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 12%;
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
I need help to make these two <div>'s (#side-nav and #content-wrapper) to scroll independently,
HTML:
<div id="wrapper">
<div id="top-nav">
Top nav
</div>
<div id="side-nav">
<ul>
<li>Thing</li>
<li>Thing</li>
</ul>
</div>
<div id="content-wrapper">
<!-- Ton of conent here -->
</div>
</div>
CSS:
#wrapper {
width: 100%;
background-color: #fff;
}
#top-nav {
position: fixed;
top: 0;
height: 60px;
width: 100%;
background-color: green;
}
#side-nav {
position: fixed;
width: 250px;
height:100vh;
overflow-y: scroll;
background-color: red;
}
#content-wrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
background-color: blue;
}
now if I scroll the #side-nav to the end or top, #content-wrapper will scroll too. #side-nav has to stay full-page height and fixed even if there is not that many <li>'s.
I've quickly made pen here:
http://codepen.io/blizqery/pen/QbZzRN
Thanks!
Check this: http://codepen.io/anon/pen/xGyMjM
You need to set height to content-wrapper, and also set the left, right & top.
#side-nav {
position: fixed;
width: 250px;
height:100vh;
left: 0;
right: 0;
overflow-y: scroll;
background-color: red;
top: 60px;
}
#content-wrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
position: fixed;
left: 0;
top: 0;
height:100vh;
background-color: blue;
}
I believe this works for your issue
body{
margin:0px;
}
#top-nav {
position: fixed;
top: 0;
height: 10vh;
width: 100%;
background-color: green;
}
#wrapper {
width: 100%;
background-color: #fff;
}
#side-nav {
float:left;
width: 250px;
height: 90vh;
overflow-y: scroll;
background-color: red;
}
#content-wrapper {
margin: 10vh 0 0 250px;
padding: 0 30px;
overflow-y: scroll;
background-color: blue;
height:90vh;
}
Is it possible without table tag or display: table?
https://monosnap.com/file/MoxMr7WehKJD4RyKWPTJ7Dyqg8dsez
<div class="wrapper">
<div class="title">Some title</div>
<div class="content">Content</div>
</div>
.wrapper {
border: 3px solid yellow;
width: 250px;
height: 350px;
position: fixed;
top: 10px;
left: 10px;
background: green;
}
.title {
min-height: 30px;
max-height: 80px;
background: blue;
}
.content {
background: red;
height: 100%;
}
http://jsfiddle.net/wqozs28y/
Ill try it with position absolute, but i donw know what will be the height on TITLE div :(
Yes, you can use flexbox depending on what level of browser support you want.
.wrapper {
border: 3px solid yellow;
width: 250px;
height: 350px;
position: fixed;
top: 10px;
left: 10px;
background: green;
display: flex;
flex-direction: column;
}
.title {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
min-height: 30px;
max-height: 80px;
background: blue;
}
.content {
background: red;
flex-grow: 1;
}
<div class="wrapper">
<div class="title">Some title</div>
<div class="content">Content</div>
</div>
JSFiddle Demo