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>
Related
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
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>
This question already has answers here:
Two divs, one fixed width, the other, the rest
(10 answers)
Closed 4 years ago.
So I am making a website that uses this setup. A nav, a panel, and a main content area. The content area is filled with divs that will be resized by media queries. The issue is I want the panel to be a fixed width, and the main area to take up the rest of the screen on all screen sizes and automatically downsize. Example. If the panel's 255px width is 25% of the screen, I want the width of main to be the next 75% of the screen. It either takes up too much space and makes it scroll horizontally, or goes down to the new line. What would be the best solution
.panel {
width: 255px;
height: 100%;
position: relative;
float: left;
background-color: orange;
}
.main {
width: 88%;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.nav {
width: 100%;
height: 300px;
background-color: yellow;
}
<div class="panel">
T
</div>
<div class="main">
<div class="nav">
T
</div>
T
</div>
LINK- https://jsfiddle.net/cn6q6keu/2/
You can do it with float and flex.
Here is a float solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
.clear-fix:before, .clear-fix:after{
display: block;
content: '';
clear: both;
}
#main{
height: 100%;
}
.panel, .nav{
float: left;
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
width: calc(100% - 225px);
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/3rxdub8d/5/
Here is a flex solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
#main{
display: flex;
height: 100%;
}
.panel, .nav{
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
flex: 1;
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/xxwsa4oh/2/
I'm afraid you're gonna have to apply this rule to the fixed width, so you'll be able to convert it to a relative unit like %:
(target รท context) * 100 = result
Target = panel fixed width;
Context = parent element width;
Result = Converted fixed width value in percentage.
I have the following site structure:
<body class="body>
<div class="main">
<div class="header" />
<div class="content" />
</div>
</body>
This is my css code:
.body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow:hidden;
}
.main {
margin: 0 auto;
overflow: hidden;
width: 900px;
}
.header {
min-height: 60px;
padding: 30px 30px 0;
}
.content {
padding: 15px;
}
In my content div, I have a quite long text. The problem is, that the text is bigger than the visible area of the browser, but no scroll bar is shown, so it seems to me as if the content div is not being stretched in order to show all of its content.
How can I achiev the latter?
Remove overflow:hidden and add overflow:auto for the body class. Also missing close " in the body class.
.body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow:auto;
}
DEMO
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.