Here's the codesandbox, as the code is too much to post here, given the nested elements.
I'd like to have:
a horizontal scroll for the .content div.
a vertical scroll just for the .group-body div.
I've tried everything and I can't get it to work.
This rule does make it "work", but I feel like it's not optimal.
.body{
height: 90vh;
}
You just need to specify max-height for .group-body and then overflow-y will work as expected.
See this fix in your code
This should solve your problem - https://codesandbox.io/s/divine-dawn-1n8b1.
It uses a flexbox instead of grid layout.
Note: The code in the link was fixed after a comment pointed out an issue. To fix the scrolling, I set the parent elements that contain the sidebar and the content to overflow:hidden, and set the parent element to overflow:auto, which allowed for the scroll bars to be contained in the content div.
Related
I have read this CSS overflow-x hidden and overflow-y visible (and a lot of other posts) but i can't get this to work in my specific case.
I'm using ths slick-slider and want to add dropdown-navigation. so i have to use a special markup.
The dropdown should overflow the slider.
I recreated the problem in the fiddle
Thank you for your help!
Setting overflow-x or overflow-y to hidden causes the other to be treated as if it has a value of auto. So slick-slider adds a scrollbar for any overflow in the y direction.
You can normally get around this by adding position: absolute. However, absolute positioning is based on the closest parent element with relative positioning. In this case, that's slick-slide, which is a child of slick-slider. As a result the dropdown is still positioned inside of slick-slider and doesn't overflow.
To resolve the issue remove position: relative from all classes that currently have it. I recommend adding position: relative to the wrapper class as well.
The problem is in .slick-slider class. If you set a little bigger height you can get past overflow, although I don't know why overflow:visible doesn't work.
I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
My page is 1920px width, and for some unknown to me reason, my scrollbar wants to scroll page into the right, where there is empty space only. I tried specifying <html style="width: 1920px;"> but that does nothing, bottom scrollbar just scrolls like the page was 2100px... Is there anything I can do about it? Like, specifying fixed horizontal overflow?
Edit: Here is the link to the page: look only at homepage, because on the other pages it looks ok: http://scyk.pl
You have a problem in the buttons bar you have to look in your code for :
<div class="frontPageButtons">
the position of the div is relative and you set left to 30% :
.frontPageButtons {
left: 30%;
position: relative;
}
You most likely have a child element that is pushing the containing block wider. Overflow hidden will work, but generally it is better to avoid setting fixed widths for child elements unless you are defining a new layout context.
try to set min-height:500px; in css
happy coding...
I know this is very simple, but i've been struggling for a while and I just can't make it work. I thought someone here might be able to give me a quick answer.
I'm trying to make a div float and align with another div. I'm trying by changing the float and display css attributes but with no luck.
I've set up a jsFiddle: jsFiddle
Thanks in advance
Here: jsfiddle
I just changed the height of the div for the example to appear better but you can set it back to your heights for your site.
I'd set the margin-top on the whole container div so that you only define that property once instead of setting it for both the menu and the content separately: anytime you're defining a value twice, you should try to put a wrapper and define it only once.
Your code works well if the screen is wide enough. Only if it's not the #content gets pushed under the submenu. To fix that give your #container a width that can accomodate both - http://jsfiddle.net/zaRqz/11/
#container {
width: 1040px;
overflow: hidden;
}
I have a page with two divs on it which should fill the entire screen.
Both of them have width = 100%
The upper one's height should be defined by its content (the minimal possible height that fits all content) and never show any scrollbars.
The lower one should fill the rest of the screen. However, if its content does not fit the div, it should display the vertical scrollbar.
Like this:
<div id="header">This block should not display the scrollbars</div>
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div>
How do I do it with CSS?
Update:
I'm looking for a solution that would not require me to set the fixed height for the upper div.
Is that possible?
this should fix your problem
#header{ overflow: hidden }
#content{ overflow-y: auto }
edit: you have to define the height of the divs aswell
In order to do it with CSS you need to define a height on the bottom div, and then add overflow:auto.
.content {
height:90%;
overflow:auto;
}
Unfortunately, this means that your top div will need a height defined as well, because content will have to take up a predefined amount of space on the page. If you use percentages for height, then you will need to define a height for your header div so stretching and shrinking the browser window doesn't cause issues.
The only way I can see you achieving this is through Javascript. I know you didn't tag/ask for JS but I can't think of a straightforward, elegant CSS solution.
With JS you could capture the onpropertychange event of the header div, check to see if the property changed was offsetHeight/clientHeight and adjust the top style property of the content div. The content div would also need to have position:absolute; and bottom:0px;.
Sorry if you're not interested in a JS solution, I just don't think there is a CSS one without accepting a user experience below what you're trying to achieve.
You should define fixed width for second div and use overflow css property to define scrollbars.