The Problem
First of all: codepen
body, html width and height = 100%
body, html {
width: 100%;
height: 100%;
}
I have parent div with width 100% and height 100% out of body, and body out of html
.p {
width: 100%;
height: 100%;
background: green;
overflow-x: scroll;
display: flex;
flex-direction: row;
}
Then:
I have 2 child elements with both height 100% and width 20% + 80% and overflow-x: scroll
.c1 {
height: 100%;
width: 20%;
background: red;
overflow-x: scroll;
}
.c2 {
height: 100%;
width: 80%;
background: blue;
overflow-x: scroll;
}
I do not understand why scroll is showing up?
Change overflow: scroll; to overflow: auto
Remove, overflow-x: scroll
overflow-x: scroll property always show the scrollbar even if all content fits and you cant scroll it.
body, html {
width: 100%;
height: 100%;
margin: 0px;
}
.p {
width: 100%;
height: 100%;
background: green;
display: flex;
flex-direction: row;
}
.c1 {
height: 100%;
width: 20%;
background: red;
}
.c2 {
height: 100%;
width: 80%;
background: blue;
}
<div class="p">
<div class="c1"></div>
<div class="c2"></div>
</div>
Please Run the Above Snippet
Related
I am trying to make a scrollable area inside my div like the image below. I want only the scrollable area to change height on different screen heights and scrolls accordingly.
The problem, is if the scrollable content is big enough to scroll, it will make the whole page scroll. If its small, the footer stays at the bottom correctly.
Here is a what I have so far
* {
margin: 0;
padding: 0;
width: 100%;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
.header {
height: 30px;
background-color: lightblue;
}
.footer {
height: 30px;
background-color: lightblue;
}
.content {
display: grid;
grid-template-rows: auto 1fr;
}
.profile {
height: 60px;
background-color: lightpink;
}
.tabs {
height: 20px;
background-color: lightgreen;
}
.scroller {
background-color: cyan;
height: 100%;
overflow-y: scroll;
}
.scrollable-content {
background-color: yellow;
width: 200px;
height: 600px;
margin: 0 auto;
position: relative;
}
span {
bottom: 0;
left: 0;
position: absolute;
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="profile">Profile</div>
<div class="tab-control">
<div class="tabs">Tabs</div>
<div class="scroller">
<div class="scrollable-content">scrollable content<span>end</span></div>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
Any help is appriciated
It works if you set some elements to have overflow: hidden;. Set that for .container, .content, and .tab-control
.container, .content, .tab-control {
overflow: hidden;
}
You will have a small issue with the .scroller element, part of it will be covered by the footer.
To fix that, add this too:
.tab-control {
display: flex;
flex-direction: column;
}
.scroller {
flex: 100% 1 1;
}
Set a fixed height on scroller. 100vh = height of the browser - 140px (the cumulative height of all the other elements on the page)
Set overflow-y: auto on the bar you want to scroll and you can set the height of .scrollable-content to as big as you want.
.scroller {
background-color: cyan;
height: calc(100vh - 140px);
overflow-y: scroll;
}
.scrollable-content {
background-color: yellow;
width: 200px;
height: 600px;
margin: 0 auto;
position: relative;
overflow-y: auto;
}
I am creating a div which is centered to the window. It's content can grow, and if it grows passed the size of the window, the content div should have it's scrollbar account for the overflow. But instead, the div just grows off the screen and gets clipped. If I set an explicit height on the content, everything works, but since I don't know the explicit height of the environment I cannot do that. What is the correct way to do this?
JSFiddle: https://jsfiddle.net/CodeVirtue/cjhz31xq
Here is the template:
<div class="fullscreen-overlay">
<div class="fullscreen-container">
<div class="window-with-titlebar">
<div class="titlebar">
<div class="titlebar-left">
Left
</div>
<div class="titlebar-right">
Right
</div>
</div>
<div class="content">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40
</div>
</div>
</div>
</div>
And all the CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.fullscreen-overlay {
background-color: red;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
padding: 12px 12px;
}
.fullscreen-container {
background-color: orange;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.window-with-titlebar {
background-color: yellow;
max-width: 100%;
max-height: 100%;
}
.titlebar {
background-color: green;
display: flex;
align-items: center;
justify-content: space-between;
height: 30px;
}
.titlebar-left {
background-color: darkgreen;
}
.titlebar-right {
background-color: lightgreen;
}
.content {
background-color: blue;
overflow-y: scroll;
max-width: 100%;
max-height: 100%;
}
I believe I was able to achieve what you are looking for by making the parent container use flexbox:
.window-with-titlebar {
background-color: yellow;
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
If you run the following code, you will see that the vertical scrollbar gets attached to html and not body, which i expect.
I expect that because body has height defined as 800px but div.a has height of 1500px. So with overflow: scroll on body, scrollbar should appear on body and not html.
Can anybody shed some light on this ?
html {
background: black;
margin: 20px;
}
body {
background: red;
padding: 0;
margin: 0;
height: 800px;
overflow: scroll;
}
.a {
width: 500px;
height: 1500px;
background: yellow;
}
.b {
width: 500px;
height: 1000px;
background: blue;
}
<div class="a">
<div class="b">
</div>
</div>
I have managed to get this to work by telling the html to not show the overflow. Passing the burden over to its child to deal with.
* {
position: relative;
box-sizing: border-box;
}
html {
background: black;
margin: 20px;
overflow: hidden;
}
body {
width: 400px;
height: 100%;
max-height: 200px;
background: red;
padding: 20px;
margin: 0 auto;
overflow-y: scroll;
}
.a {
width: 300px;
height: 1500px;
padding: 20px;
margin: 0 auto;
background: yellow;
overflow-y: scroll;
}
.b {
width: 200px;
height: 3000px;
margin: 0 auto;
background: blue;
}
<div class="a">
<div class="b">
</div>
</div>
I have an horizontal scrollbar class="filter_list" into a wrapper div class="wrapper". I want this scrollbar to be always 100% of the wrapper div and I want this wrapper div to be responsive.
It's working fine if I only have one item in my filter list but as soon as I put more than the wrapper width size, it's not responsive anymore.
Here are some pictures to illustrate the problem :
Responsive and working fine :
OK
The scrollbar is blocking the width of the wrapper that doesn't shrink to fit the dimension of the window (we can see that the picture of the girl is no longer it's 100% square size):
NOT OK
Here is the code :
body {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 800px;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.magic_wand {
margin: 15px 0px 20px;
max-width: 50px;
}
.ico_magic_wand {
width: 100%;
height: 100%;
object-fit: contain;
}
.picture_preview {
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.picture_preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
.filter_list {
width: 100%;
background-color: blueviolet;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.filter:last-child {
margin-right: 0px;
}
.filter {
display: inline-block;
height: 150px;
width: 150px;
background-color: blue;
margin-right: 15px;
}
<body>
<div class="wrapper">
<div class="magic_wand">
<img src="img/ico/magic_wand.png" class="ico_magic_wand">
</div>
<div class="picture_preview">
<img src="https://images.unsplash.com/photo-1527514086375-0a7bae9089be">
</div>
<div class="filter_list">
<div class="filter">
</div>
<div class="filter">
</div>
<div class="filter">
</div>
<div class="filter">
</div>
</div>
</div>
</body>
I would like to understand why the div class="filter_list" width won't shrink with it's parent div while reducing the width of the window and how to fix the problem, thanks a lot !
Try this code.. I can't understand your question.. it may ur expectation,, else explain it clearly..
css
.filter {
display: inline-block;
height: 150px;
width: 21.3%;
background-color: blue;
margin-right: 15px;
}
.filter:nth-child(4n+4) {
margin-right: 0px;
}
Please remove ur css code and add this codes.. I think display:flex; is the issue for ur code..
body {
margin:0px;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
width: 800px;
margin: 0 auto;
text-align: center;
}
.magic_wand {
margin: 15px auto 20px;
max-width: 50px;
}
.picture_preview {
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.picture_preview img {
height: 100%;
}
.filter_list {
width: auto;
background-color: blueviolet;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.filter:last-child {
margin-right: 0px;
}
.filter {
display: inline-block;
height: 150px;
width: 150px;
background-color: blue;
margin-right: 15px;
}
#media only screen and (max-width: 1024px) {
.wrapper {
width: 100%;
}
}
I have two divs streched to the size of the parent(body), but on application of inline-block attribute the divs are placed one below the other instead of beside each other.
I want them to be placed beside each other, such that i need to scroll horizontally instead of vertically.
jsFiddle - http://jsfiddle.net/wJ73v/364/
html
<div class="red"></div>
<div class="red-blue"></div>
css
html {
height: 100%;
width: 100%;
}
body {
margin:0;
padding: 0;
height: 100%
}
.red {
background-color: red;
height: 100%;
width: 100%;
display: inline-block;
}
.red-blue {
background: linear-gradient(red, blue);
height: 100%;
width: 100%;
display: inline-block;
}
Do like this, add white-space: nowrap to the body
html,
body {
height: 100%;
margin: 0;
white-space: nowrap;
}
.red {
background-color: red;
height: 100%;
width: 100%;
display: inline-block;
}
.red-blue {
background: linear-gradient(red, blue);
height: 100%;
width: 100%;
display: inline-block;
}
<div class="red"></div>
<div class="red-blue"></div>
If you want to get rid of that vertical scroll, you can set overflow-y: hidden; on the body.
If you need the scroll, you can use flexbox.
html, body {
height: 100%;
margin: 0;
display: flex;
}
.red {
background-color: red;
height: 100%;
width: 100vw;
}
.red-blue {
background: linear-gradient(red, blue);
height: 100%;
width: 100vw;
}
<div class="red"></div>
<div class="red-blue"></div>