I'm currently strugging to make a node-webkit app fit the height of the current window. Below is an image of what I'm trying to achieve.
Desired result :
HTML :
<body>
<div class="header">
THIS IS A HEADER WITH LINKS AND THINGS
</div>
<div class="content">
<div class="sidebar">
SIDE BAR WITH MORE LINKS AND THINGS
</div>
<div class="mainarea">
<div class="chatbox">
SOME SORT OF BOX WITH THINGS IN
</div>
<form>
<input name="q" placeholder="type something here"/>
<input type="submit" value="Send"/>
</form>
</div>
</div>
</body>
CSS :
body {
height: 100%;
}
.header {
height: 80px;
background-color: red;
}
.content {
width: 100%;
height: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
background-color: yellow;
}
.chatbox {
width: 100%;
border-style: solid;
border-width: 1px;
}
.mainarea {
float: right;
width: 80% !important;
background-color: green;
height: 100%;
}
Demo :
JSFiddle
Instead of float:right/left for .mainarea/.sidebar use display:table-cell. Also :
body, html { height: 100%; margin:0; }
.content { width: 100%; height: calc(100% - 80px); display:table; }
JSFiddle
You could use flexbox too.
http://jsfiddle.net/tetm7/
HTML
<div class="main">
<div class="header">HEADER</div>
<div class="content">
<div class="sidebar">SIDEBAR</div>
<div class="box">TEXT BOX</div>
</div>
</div>
CSS
html, body, .main {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.content {
display:flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
width: 100%;
height: 100%;
background-color: yellow;
}
.sidebar {
background-color: orange;
width: 200px;
}
.box {
background-color: green;
width: 300px;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
Related
I need to place block with overflowed content inside flex column (flex-grow:1) and not to break parent wrapper max-width.
Im unable to change flex styles (so I cant set flex column min-width:0), Im able to edit only the content inside flex column.
Any thoughts?
.wrapper {
max-width: 800px;
background-color: grey;
}
.flex {
display: flex;
}
.column1 {
width: 200px;
height: 100px;
flex-shrink: 0;
background-color: green;
}
.column2 {
flex-grow: 1;
background-color: red;
/* min-width: 0; */
}
.overflow {
max-width: 100%;
overflow: auto;
}
.wideContent {
height: 100px;
width: 2500px;
}
<div class="wrapper">
<div class="flex">
<div class="column1"></div>
<div class="column2">
<div class="overflow">
<div class="wideContent"></div>
</div>
</div>
</div>
</div>
Use min-width: 100%;width: 0; on the overflow element:
.wrapper {
max-width: 800px;
background-color: grey;
}
.flex {
display: flex;
}
.column1 {
width: 200px;
height: 100px;
flex-shrink: 0;
background-color: green;
}
.column2 {
flex-grow: 1;
background-color: red;
}
.overflow {
min-width: 100%;
overflow: auto;
width: 0;
}
.wideContent {
height: 100px;
width: 2500px;
}
<div class="wrapper">
<div class="flex">
<div class="column1"></div>
<div class="column2">
<div class="overflow">
<div class="wideContent"></div>
</div>
</div>
</div>
</div>
I am wondering, if there are any alternative/better ways to create this dashboard layout with flex or maybe grid? So I wouldn't need to add this pusher with 200px margin.
I heard about that it can be done using flex 1 1 0% or something like that, I am not sure how to implement it.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 200px;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
background: blue;
flex: 1;
height: 100vh;
}
.pusher {
margin-right: 200px;
}
.nav{
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="pusher">
</div>
<div class="body">
<div class="nav">
Nav
</div>
test
</div>
</div>
Here you go...
I removed the div with class="pusher" and changed/added the CSS as follows:
.sidebar {
width: 20vw;
}
.body {
position: absolute;
width: 80vw;
right: 0;
}
Basically, I made the div class="sidebar" and the div with class="body" make up to 100 % of the screen but in different relative units, i.e. vw (20 vw + 80 vw = 100 vw). So, now I just needed to add right: 0; to the div with class="body" in order to achieve the exact same result as you did with margin-right: 200px;. I also added position: absolute; to the div with class="body", otherwise it won't work.
See the snippet below.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 20vw;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
position: absolute;
background: blue;
height: 100vh;
width: 80vw;
right: 0;
}
.nav {
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="body">
<div class="nav">Nav</div>
<div>test</div>
</div>
</div>
Hi I change your HTML and CSS code and I do my best for you.
HTML CODE:
<div class="main">
<div class="sidebar">This is Sidebar</div>
<div class="content">
<div class="nav">
Nav
</div>
<div class="content-body">
test
</div>
</div>
</div>
CSS Code:
body {
margin: 0;
}
.main{
display: flex;
width: 100vw;
}
.sidebar {
left: 0;
width: 200px;
background: red;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
width: 100vw;
background: #ddd;
height: 100vh;
}
.nav{
background: yellow;
height: 60px;
}
.content-body {
background: blue;
height: 100vh;
}
Is it possible to make a div with a height of 100%, and have the inner item that overflows scroll.
It sounds like a simple problem (and it might be), but I have been thinking about it for days. Some things that don't work in my specific case are:
height: calc(100% - xx px), because the header is of a variable height.
Putting all high children as direct children in the wrapper component (I use a component that has some layers
<div class="wrapper">
<div class="header">
A header
</div>
<div class="container">
A container
<div class="with-many">
Don't scroll
<div class="divs">
Scroll
</div>
</div>
</div>
</div>
.wrapper {
width: 80vw;
height: 80vh;
background-color: lightgrey;
* {
width: 100%;
}
.header {
height: 30px;
background-color: orange;
}
.container {
height: 100%;
background-color: lightgreen;
.with-many {
height: 100%;
overflow-y: auto;
background-color: green;
.divs {
height: 400vh;
background-color: blue;
}
}
}
}
https://jsfiddle.net/zdb8pmuL/1/
Do you mean like this?:
.wrapper {
width: 80vw;
height: 80vh;
background-color: lightgrey;
}
.wrapper * {
width: 100%;
}
.header {
height: 30px;
background-color: orange;
}
.container {
height: 100%;
background-color: lightgreen;
display: flex;
flex-direction: column;
}
.with {
height: 100%;
background-color: green;
}
.another-wrapper {
overflow-y: scroll;
height: 100%;
}
.divs {
height: 400vh;
background-color: blue;
}
<div class="wrapper">
<div class="header">
A header
</div>
<div class="container">
A container
<div class="with">
With many
<div class="another-wrapper">
<div class="divs">
nested divs
</div>
</div>
</div>
</div>
</div>
Let's say I have a parent <div> with a fixed height and with flex item children.
Is there a way to have its children height not fixed but extending depending on their content ?
.main-container {
height: 250px;
background-color: green;
display: flex;
flex: 0 1 auto;
overflow: auto;
}
.div1 {
width: 100%;
height: 100%;
background-color: lightcoral;
}
.div2 {
width: 100%;
background-color: lightgrey;
}
.div3 {
width: 100%;
background-color: lightpink;
}
div p {
font-size: 10em;
}
<div class="main-container">
<div class="div1">
<p>a</p>
</div>
<div class="div2">q</div>
<div class="div3">s</div>
</div>
Wanted result :
You don't need to use fit-content (which is not supported in Firefox: https://caniuse.com/#feat=mdn-css_properties_height_fit-content), you simply need to disable the stertch effect by adding align-self:flex-start; to the needed element
.main-container {
height: 250px;
background-color: green;
display: flex;
flex: 0 1 auto;
overflow: auto;
}
.div1 {
width: 100%;
align-self:flex-start;
background-color: lightcoral;
}
.div2 {
width: 100%;
background-color: lightgrey;
}
.div3 {
width: 100%;
background-color: lightpink;
}
div p {
font-size: 10em;
}
<div class="main-container">
<div class="div1">
<p>a</p>
</div>
<div class="div2">q</div>
<div class="div3">s</div>
</div>
Is there a way to have its children height not fixed but extending depending on their content ?
If you want a div to be as high as it content needs, you can apply height: fit-content; on that div.
Example in the snippet below (for the left column):
.main-container {
height: 250px;
background-color: green;
display: flex;
flex: 0 1 auto;
overflow: auto;
}
.div1 {
width: 100%;
height: fit-content;
background-color: lightcoral;
}
.div2 {
width: 100%;
background-color: lightgrey;
}
.div3 {
width: 100%;
background-color: lightpink;
}
div p {
font-size: 10em;
}
<div class="main-container">
<div class="div1">
<p>a</p>
</div>
<div class="div2">q</div>
<div class="div3">s</div>
</div>
I need to create one page with 4 elements: header, filter of elements, item list and item. But i can't to set div's without main page scroll. I want to have only one scroll bar - in item-list?
html,
body {
margin: 0;
height: 100%;
}
.header {
background-color: cadetblue;
height: 3em;
width: 100%;
}
.space {
width: 25em;
height: 100%;
}
.filter {
width: 100%;
height: 5em;
background-color: darkblue
}
.item-list {
height: 100%;
margin: 0.2em;
overflow: auto;
}
.item {
background-color: burlywood;
height: 20em;
width: 100%;
}
<body>
<div class="header"></div>
<div class="space">
<div class="filter"></div>
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
Can anybody to help me with this?
You can use flex and overflow:
html,
body {
margin: 0;
height: 100%;
}
/* === flex update ====*/
body, .space {/* display:flex and overflow:hidden */
display:flex;
flex-direction:column;
overflow:hidden;
}
.space, .item-list {/* fill whole space avalaible */
flex:1;
}
.item-list {
overflow: auto;/* overflow ...*/
background:gray /* debug, see me */
}
/* === end flex update ====*/
.header {
background-color: cadetblue;
height: 3em;
}
.space {
width: 25em;
}
.filter {
width: 100%;
height: 5em;
background-color: darkblue
}
.item-list {
margin: 0.2em;
}
.item {
background-color: burlywood;
height: 20em;
width: 100%;
}
<div class="header"></div>
<div class="space">
<div class="filter"></div>
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
You can avoid using Scroll on the main element by setting a static height on your header and using calc on your space element, just like the example..
html,
body {
margin: 0;
height: 100vh;
}
.header {
background-color: cadetblue;
height:20px;
width: 100%;
}
.space {
width: 25em;
height: calc(100% + -30px);
position:relative;
}
.filter {
width: 100%;
height: 20%;
background-color: darkblue
}
.item-list {
height: 80%;
margin: 0.2em;
overflow: auto;
}
.item {
background-color: burlywood;
height: 20em;
width: 100%;
}
<body>
<div class="header"></div>
<div class="space">
<div class="filter"></div>
<div class="item-list">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
remove overflow:auto from .item-list
and make the .item class height 100% instead of 20em.
Hope this will full full your requirement.