To better explain the situation. I've made a quick image to explain:
Basically, this seems paradoxical and I'm not sure if it can be done through CSS only.
The left and right columns can be scrolled vertically at the same time while the header stays fixed on top and NEVER scrolls vertically.
The right column can be scrolled horizontally WHILE also scrolling the left column HEADER horizontally.
Also note, that all this needs to be inside a <div> so I can't use position: sticky, which only works based on the browser window. The table has a fixed height and the browser window doesn't have a scroll.
Here is my attempt:
* {
box-sizing: border-box;
}
.columns {
width: 796px;
border: 2px solid green;
height: 200px;
overflow-y: scroll;
display: flex;
}
.left-col {
width: 200px;
border: 2px solid yellow;
}
.right-col {
width: 600px;
height: 200px;
border: 2px solid brown;
overflow-y: auto;
overflow-x: auto;
}
.filler-y {
height: 1200px;
width: 10px;
background-color: red;
}
.filler-both {
width: 2000px;
height: 2000px;
background-color: red;
}
<div class="columns">
<div class="left-col">
leftcol
<div class="filler-y"></div>
</div>
<div class="right-col">
right col
<div class="filler-both"></div>
</div>
</div>
View on jsFiddle
Related
.scroll {
border: 1px solid black;
width: 200px;
height: 200px;
overflow: scroll;
background-color: yellow;
}
.inner {
height: 100%;
}
.content {
height: 100%;
margin: 50px 0;
background-color: red;
}
<div class="scroll">
<div class="inner">
<div class="content">
</div>
</div>
</div>
Fiddle
The above snippet consists of a scrollable div of size 200px. Inside that is an element with height 100%, and inside that is another element with height 100% but with top and bottom margin of 50px.
I would expect that the scrollable height of the div would be 50 + 200 + 50 = 300px. Indeed, this is the case in Chrome and Firefox where you can see the top and bottom yellow margin when you scroll the div, but for some reason Safari clips the bottom margin and the scrollable height is only 50 + 200 = 250px.
Who is correct here? Is this a Safari bug? Is there an easy fix for this without changing the overall structure of the page too much?
Adding overflow: auto; to your div.inner seems to solve the problem in Safari.
.scroll {
border: 1px solid black;
width: 200px;
height: 200px;
overflow: scroll;
background-color: yellow;
}
.inner {
height: 100%;
overflow: auto;
}
.content {
height: 100%;
margin: 50px 0;
background-color: red;
}
<div class="scroll">
<div class="inner">
<div class="content">
</div>
</div>
</div>
I got a little problem when i want to put an overflow: scroll on an element. That element is going outside his parent and i want to just make it scroll.
I remade the problem on codepen so you can check it.
I would like to keep the entire page to not scroll. Just the element i want would be able to be scrolled.
Sorry for my english.
* {
border: 1px solid black;
}
html {
height: 100vh;
margin: 0;
padding: 5px;
}
body {
height: 100%;
margin: 0;
}
img {
width: 150px;
display: block;
margin: auto;
margin-top: 50px;
}
.website {
width: 960px;
margin: auto;
}
input {
width: 100%;
}
.yes {
height: 150px;
}
.container_scroll {
overflow: scroll; /* not working*/
}
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5f4bd7a6-f763-4518-9b81-bdfd40ce3fc9/d26yer1-421bb5b8-9fc2-4d5a-b2d1-1e1f81b26b82.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzVmNGJkN2E2LWY3NjMtNDUxOC05YjgxLWJkZmQ0MGNlM2ZjOVwvZDI2eWVyMS00MjFiYjViOC05ZmMyLTRkNWEtYjJkMS0xZTFmODFiMjZiODIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.p5vfqGmq9kIylfG3glHGa20CAPUtoWlAxKEGpIvGOi8">
<div class="website">
<section>
<h2>title</h2>
<input type="text" placeholder="my_text">
<div class="container_scroll">
<div class="yes"></div>
<div class="yes"></div>
<div class="yes"></div>
</div>
</section>
</div>
Assuming you're trying to scroll on the y-axis (up and down, not left to right), it's not scrolling because you don't have a height set on the parent. You only have height set on the children for a total of 150px a piece, or 450px overall. Also - if you want to make sure you ONLY scroll up and down, you'll want to specify that you want to only scroll on that axis, and not the other - as seen below.
If you tried changing the overflow property to auto instead of scroll (a good way to check if it will have any overflow because scrollbars ONLY appear if needed) - you see that a scrollbar doesn't appear - so there is no overflow currently.
If you want to have a scroll, you'll need to set the height to less than the overall height of the children (450px).
* {
border: 1px solid black;
}
html {
height: 100vh;
margin: 0;
padding: 5px;
}
body {
height: 100%;
margin: 0;
}
img {
width: 150px;
display: block;
margin: auto;
margin-top: 50px;
}
.website {
width: 960px;
margin: auto;
}
input {
width: 100%;
}
.yes {
height: 150px;
}
.container_scroll {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
height: 300px;
}
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5f4bd7a6-f763-4518-9b81-bdfd40ce3fc9/d26yer1-421bb5b8-9fc2-4d5a-b2d1-1e1f81b26b82.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzVmNGJkN2E2LWY3NjMtNDUxOC05YjgxLWJkZmQ0MGNlM2ZjOVwvZDI2eWVyMS00MjFiYjViOC05ZmMyLTRkNWEtYjJkMS0xZTFmODFiMjZiODIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.p5vfqGmq9kIylfG3glHGa20CAPUtoWlAxKEGpIvGOi8">
<div class="website">
<section>
<h2>title</h2>
<input type="text" placeholder="my_text">
<div class="container_scroll">
<div class="yes"></div>
<div class="yes"></div>
<div class="yes"></div>
</div>
</section>
</div>
I want two divs that are both full height (100vh) and half width (50vw) to sit next to each other (essentially filling the whole page). However, in Chrome and Firefox the second div always drops below the first. If I decrease the height, to 50vh for example, the two divs sit side by side. Oddly enough the exact same code works in jsfiddle.net. https://jsfiddle.net/e6x2j0kr/
html, body {
background: red;
margin: 0;
padding: 0;
border: 0;
}
#container {
height: 100vh;
}
#left {
background: blue;
width: 50vw;
margin: 0;
padding: 0;
border: 0;
float: left;
height: 100vh;
}
#right {
background: yellow;
width:50vw;
margin: 0;
padding: 0;
border: 0;
float: left;
height: 100vh;
}
<div id="container">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Thank you for any help.
Using vh can be buggy fairly often, largely because scroll bars will mess it up. You may have noticed webpages where you're able to scroll sideways just a bit. About the width of one scrollbar to be exact.
In your case, I imagine what's happening is a tiny render issue, which results in a scrollbar existing, which then forces there to need to be a scrollbar permanently.
If you're willing to use other css styling, I recommend flex:
#Container {
height: 100vh;
width: 100vw;
display: flex;
}
#Container > div {
width: 50%;
}
#Child1 {
background: #E6E;
}
#Child2 {
background: #6EE;
}
<div id="Container">
<div id="Child1"></div>
<div id="Child2"></div>
</div>
The reason I recommend flex is that it will force the items to be on the same row no matter what. You may notice strange scrolling stuff. This is the vh issue again, so just using percentage might work better.
This is odd, It works in the snippet and jsFiddle, but I just chucked it into a project and opened the file in chrome and it looks as you say. I think view width might include the scrollbar in the screen size, which might make it overflow.
I set #right {float: right} and you can see it overlaps the left div. However what you can do is set the width to 50% for both of them and that works:
html, body {
background: red;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: none;
}
#container {
height: 100vh;
}
#left {
background: blue;
width: 50%;
margin: 0 !important;
padding: 0 !important;
border: 0;
float: left;
height: 100vh;
}
#right {
background: yellow;
width: 50%;
margin: 0 !important;
padding: 0 !important;
border: 0;
float: right;
height: 100vh;
}
<div id="container">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
I have a table inside a div that is inside of a div. Like the snippet below:
*
{
overflow: hidden;
}
.body
{
height: 300px;
width: 300px;
border: 1px solid black;
}
.header
{
height: 50px;
width: 300px;
}
.page
{
height: 198px;
width: 298px;
border: 1px solid green;
overflow: auto;
}
.container
{
}
.table
{
height: 96px;
width: 396px;
border: 1px solid blue;
}
<div class="body">
<div class="header">
</div>
<div class="page">
<div class="container">
<div class="table">
</div>
</div>
</div>
</div>
Here I want want the "page" element to be where the scrollbars are located for whenever scrollbars are needed. That's why everything is set to overflow: hidden; except the "page" element. Now this doesn't work on width overflow and is clipped - note that all height overflow work as intended thought and gives a scrollbar on the correct "page" element.
It is also useless to set overflow: auto; to the "container" element as the scrollbar is on that element and not the parent "page" element.
How can I get an overflow inside the child element to move down to the parent element I choose so I always get the scrollbar where I want it?
If I understood your question correctly, then the reason the scroll wasn't working is because of overflow:hidden, that property means everything outside of the elements width will be completely hidden so it can't be scrolled to.
The solution is to set overflow:visible to everything other then the page element, this means everything that overflows will still be visible, but the elements with this property won't have their own scroll bars.
Here is your edited snippet I think it achieves what you wanted, hope it helps:
.body
{
height: 300px;
width: 300px;
border: 1px solid black;
}
.header
{
height: 50px;
width: 300px;
}
.page
{
height: 198px;
width: 298px;
border: 1px solid green;
overflow: auto;
}
.container
{
}
.table
{
height: 96px;
width: 396px;
border: 1px solid blue;
}
<div class="body">
<div class="header">
</div>
<div class="page">
<div class="container">
<div class="table">
</div>
</div>
</div>
</div>
I have a div inside a div. The CSS/HTML is below. I am trying to figure out how to make the inner div have true height: 100%; with no overflow and what not. No matter what I try the border of the inner div gets cropped because of the outer div's overflow: hidden.
For reasons I cannot modify the content or style of either divs. I can, however, wrap the inner div in other divs if needed. This is not done through JavaScript which is why I cannot modify the outer or inner divs.
Also, this has to work in IE8.
The outer div style won't change much -- only the width, height, background-color, and margin.
The inner div could be anything. It could have a bigger border, it could have no border, it could be who knows what.
#outer
{
width: 200px;
height: 200px;
background-color: yellow;
margin: 20px;
overflow: hidden;
position: absolute;
}
#wrapper
{
height: 100%;
}
#inner
{
border: 1px solid red;
height: 100%;
}
<div id="outer">
<div id="wrapper">
<div id="inner">
a
</div>
</div>
</div>
You can use css flex property for #wrapper
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#outer
{
width: 200px;
height: 200px;
background-color: yellow;
margin: 20px;
overflow: hidden;
position: absolute;
}
#wrapper /* adding flex */
{
display: flex;
flex-flow: column;
height: 100%;
}
#inner
{
border: 1px solid red;
height: 100%;
}
<div id="outer">
<div id="wrapper">
<div id="inner">
a
</div>
</div>
</div>
it will work on all latest browser but this won't work on IE8.
jsfiddle
change the #wrapper height to only 99% will solve the problem.
The reason why the inner is getting cut off because:
#inner {
height: 100%; //this means it equals to 200px
border: 1px solid red; //1px at the top border and 1px at the bottom added to the height of the #inner so now it becomes 202px, which will get cut off by overflow:hidden
}