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.
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>
I have a section inside width: 1180px; i want to extend this green color div I want to make width: 100% I have tried using vw but not getting but some extra space is coming. can anyone suggest me? Is there any other way to do using CSS.
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
width: 100vw;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You need to reset the margin using media query. Initially you have a negative margin but after 1180px it will be a positive one creating the unwanted space. You also don't need to set width using vw unit. Keeping the default width is enough:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
}
#media all and (max-width:1180px) {
.box2 {
margin:0;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You could use negative margin - the only problem with this approach is that if the page gets a vertical scroll, this will add a horizontal scroll as 100vw doesn't take into account the 20px caused by the vertical scroll:
body {
margin: 0;
}
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
#media screen and (min-width:1180px) {
.box2 {
margin: 0 calc(((100vw - 1180px) / 2) * -1);
width: auto;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
As I say in my comments, it would be better to just move the green div outside your wrapper
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Try this:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
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;
}