This question already has answers here:
Hide scroll bar, but while still being able to scroll
(42 answers)
Closed 7 years ago.
I've run into trouble while trying to hide scrollbars from certain divs.
I found some solutions on the forum but they never really match my case so I'm still struggling with the problem.
My problem: I'm trying to hide scrollbars in a div that is nested inside another div that has non fixed size. (they are set to 100% of the body).
Here's the HTML:
<div id="events">
<div id="event-list"></div>
<div id="event-details"></div>
</div>
And the CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#events {
width: 100%;
height: 100%;
}
#event-list {
float: left;
width: 50%;
height: 100%;
background-color: pink;
}
#event-details {
float: right;
width: 50%;
height: 100%;
background-color: cyan;
}
Codepen available here
I would like #event-list and #event-details to have no scrollbar but still be scrollable. If you have any idea (css? js? jquery?), I'll take it!
Thanks in advance,
alex
You can do a nested div with the outer div's width set to 100% with overflow:hidden and the inner div set to a width of 105% (you can fine tune this value) and overflow set to overflow:scroll
JSFiddle here
Related
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 10 months ago.
I like to have a div that keeps all it's children in the center (vertical and horizontal). I can easily achieve this by using flexbox. But when my children width get bigger than the parent, overflow: scroll does not work
Codepen
Anybody know why and how can be fixed?
Update
My issue has been fixed. BUT, when I add a content to children, the content not showing correctly.
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.children {
min-width: 1200px;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children"><h1>Welcome to my city, California</h1></div>
</div>
It looks like the child object is not actually 1200px - it's getting squished down to 500px. However, if you set min-width: 1200px; in the child component, it seems to override this and produces the behavior you expect.
This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 3 years ago.
I have added this code to my website but there is no effect:
.wp-block-column:not(:first-child) {
position: sticky;
top: 0px;
}
Here I share a fiddle to demonstrate: https://jsfiddle.net/9xb0q8fw/1/
Screen must be at least 790px wide.
I would like that the right column stays sticky until the left column has passed while scrolling down.
But position:sticky; is not taking effekt.
Thank you for any help!
The sticky element in your fiddle has no height setting - use a set height to avoid that, then the sticky position works:
https://jsfiddle.net/rocz5nL1/
position: sticky only works when the parent element around it has a larger height, and when it reaches the end of that element it "bottoms out". So if the wrapping parent element is the same height as the sticky element, it never gets a chance to become sticky. See this demo for a working example of what I mean.
.container {
height: 900px;
}
.content-half {
float: left;
width: 50%;
background: #EEE;
}
.i-am-sticky {
position: sticky;
top: 0px;
padding: 10px;
margin: 10px;
border: 1px solid blue;
background-color: #333;
color: #FFF;
}
<div class="container">
<div class="content-half">
<div class="i-am-sticky">Sticky - not working b/c parent is too short</div>
</div>
<div class="content-half" style="height: 500px;">
<div class="i-am-sticky">Sticky - works b/c parent has height!</div>
</div>
</div>
This question already has answers here:
Why is there vertical scroll on the main container?
(4 answers)
Closed 6 years ago.
What I want to do it is that my html and body tags occupy the full screen of any computer. The limits of the screen depending of the screen of each computer without scrollbars or overflow:hidden property.
This is my simple HTML code:
<body>
<div id="centerDiv"></div>
</body>
Prove 1
So what I have tried in a first instance it is to set the html and body tag with height: 100%; but a scroll appears on the screen. This is my CSS:
html{
height: 100%;
background-color: blue;
}
body{
height: 100%;
background-color: green;
}
#centerDiv{
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
and you have the jsfiddle in which you can see the scroll.
Prove 2
Then, after seeing that the scroll appears, I tried changing html tag to min-height: 100%; so the html tag will be like this:
html{
min-height: 100%;
background-color: blue;
}
and you can see the jsfiddle in which you can see that the scroll dissapears but the body tag does not occupy the full screen.
Prove 3
Also, I tried to set both html and body tags with min-height: 100%; but the result it is the same as in the case 2.
I supposed that min-height: 100%;, as its name indicates, would be the default height taking as reference the height of the parent, but it does not seem to work. Here it was posted as a bug, but not in case of using it on html or body tags.
Looking around Stackoverflow I could see that in some cases people use display:table for the parent element and display: table-row; for the child elements when they are using min-height on the parent element but as in this case I am using the html and body tags I do not know if it is very appropriate to set both tags display as a table.
The performance that I want it is that my webpage looks like my second one prove, but with body tag wrapping all the screen also.
How can I achieve it?
<body> has default margin, so you need to reset margin on <body>
html,
body {
height: 100%;
}
body {
background-color: green;
margin: 0
}
#centerDiv {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
<body>
<div id="centerDiv"></div>
</body>
An alternative to #dippas's solution using viewport units:
*, :before, :after {
margin: 0;
}
body {
height: 100vh;
width: 100vw;
background: green;
}
This question already has answers here:
CSS Div width percentage and padding without breaking layout
(3 answers)
Margin-Top push outer div down
(8 answers)
Closed 8 years ago.
New to this, so apologies if I missed a crucial lesson in CSS...
I'm trying to do a simple exercise in CSS... a div within a div, both sized with percentages so they respond to a changing window size. Here's my code:
<head>
<title>Percentage Test</title>
<style>
html, body {
height: 100%;
margin: 0;
}
#outer {
height: 100%;
width: 100%;
background-color: yellow;
}
#inner {
height: 90%;
width: 90%;
/* margin: 5%; */
background-color: blue;
}
</style>
</head>
<body>
<div id="outer"><div id="inner"></div></div>
</body>
Everything does just what I thought; the outer div takes up the whole screen and the inner div takes up 90% of the outer div. If I add to this (i.e. add another inner div, change the percentages) everything does what I would expect. If I add a surrounding margin to the inner div (in this case, 5% but commented out), I would expect the inner div to be centered (top/bottom, left/right) within the outer div. It works for the sides and the bottom but not the top. Instead, the outer div is pushed away from the body at the top (I assume 5% but I'm not sure). Any thoughts on why this happens?
Box-sizing will include padding and borders within the widths size.
DEMO
#outer {
height: 100%;
width: 100%;
padding:5px;
background-color: yellow;
box-sizing:border-box;
}
#inner {
height: 100%;
width: 100%;
/* margin: 5%; */
background-color: blue;
box-sizing:border-box;
}
TIPS
Top margins often fail in some browsers.
Use margin-bottom or padding-top to create the vertical space.
Height 100% will not stretch to fit the outer most container without additional hacking.
The div will only be the size of it's content.
This is the way the CSS box model works by default. The dimensions of an object is the set width/height plus any borders/margin/padding.
To have any borders/margins/padding included in the specified width, use the box-sizing:border-box; setting on that element in your CSS.
This question already has answers here:
Horizontal scroll in DIV with many small DIV's inside (no text)
(2 answers)
Closed 9 years ago.
I have HTML structure like this :
<div class="wrapper">
<div class="fixed_column"></div>
<div class="fixed_column"></div>
<div class="fixed_column"></div>
</div>
Here is my CSS :
.wrapper{
width:500px;
float:left;
/*overflow-y:scroll;*/
overflow-x:scroll;
}
.fixed_column{
float: left;
height: 600px;
position: relative;
width: 250px;
}
So I want only two columns to fit inside my wrapper. And so without third column being present it fits inside.
Once I add the third column like in the HTML above, the third column doesn't stay in the same row but it drops to the next line and I end up with vertical scroller instead of horizontal. added overflow-x to my css and I don't get a horizontal scroll-bar but the third column still drops to the next line.
However I tried to increase wrapper to 750px and this time all three columns fit in the same line so I thought nothing is wrong with my css or did I think wrong?
Why would there not be horizontal scroll once my wrapper is 500px and I have three columns inside with width:250px on each.
Add white-space: nowrap; to the container, use inline-block instead of float, and use overflow-x instead of overflow-y.
This works:
http://jsfiddle.net/vXqY2/
.wrapper {
width: 600px;
white-space: nowrap;
overflow:scroll;
}
.fixed_column {
display: inline-block;
height: 100px;
width: 250px;
background-color: red;
}
The floated elements are going to automatically wrap down to the next level if they start going off the right of the parent container. That's how floats work. To keep them on the same line, you have a few options:
Make the parent container wider (as you did), but you'll need an extra element for the scrollbar
Switch from float: left; to display: inline-block; (as #Alex suggested), but you'll need to make concessions for IE7.
Switch from float: left; to display: table-cell;. Don't recommend this, I tried it and it turns out it's kind of painful :-p
See all techniques in a jsFiddle demo
It is because your fixed columns divs are only 250px so they never break the 505px container they are currently in.
Here try this.
example:
<div class="wrapper">
<div class="scroll-container">
<div class="fixed_column">A</div>
<div class="fixed_column">B</div>
<div class="fixed_column">C</div>
</div>
</div>
.wrapper {
width: 505px;
position:relative;
overflow-y: scroll;
overflow-x: scroll;
}
.scroll-container {
width:1000px;
}
.fixed_column {
float: left;
height: 600px;
position: relative;
width: 250px;
background-color: green;
}