How To Scroll To A Div Without A Fixed Height
Welcome to the Treehouse Community
The Treehouse Customs is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to become support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of optics on your latest projection. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students tin can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive customs. Starting time your gratuitous trial today.
Making a Div Non Scrollable Without Using Position: Fixed;
Hi, I've been trying out multiple attempts, but yet couldn't figure out the solution to my problem.
The website I'm creating is mainly divided vertically into ii parts: a div for the left side content (id #leftside), and a 2nd div for the right side (id #rightside). And I'm trying to make only the div #rightside scrollable, while the #leftside remains fixed. Case site: http://madebypfd.com/website-design-and-photography-for-grays-bath
I tin can achieve that easily with position: fixed and another css properties, only the trouble comes in when the site is viewed on a smaller device. When viewed on a smaller screen, these ii divs showtime overlapping on top of each other because the #leftside'southward position is fixed. They don't overlap if I remove the fixed position, but that ways it will be scrollable again. And so I'm stuck in this wheel, unable to figure out how to continue well-nigh this. Example site that I've posted above has done information technology beautifully, and I'k curious how it was washed.
Below is office of my html:
< div class = "jumbotron" > < div class = "row" > < div class = "col-xs-12 col-sm-v col-md-5 col-lg-5" id = "leftside" > < div class = "noCollapse" > < h1 >Championship</ h1 > < p class = "roles" >text for roles</ p > < img src = "" > </ div > <!-- end of noCollapse --> < div class = "showHide" > < p class = "fulldescription" >paragraph 1</ p > < p form = "fulldescription" >paragraph 2</ p > < img src = "" grade = "circleIcon" > </ div > <!-- end of showHide --> < button blazon = "button" form = "btn btn-principal" >Testify More</ button > <!-- expand/plummet .showHide --> </ div > <!-- terminate of leftside --> < div class = "col-xs-12 col-sm-7 col-md-vii col-lg-7" id = "rightside" > < img src = "" width = "1127" class = "scaling" > < img src = "" width = "1127" class = "scaling" > </ div > <!-- cease of rightside --> </ div > <!-- end of the main row --> </ div > <!-- end of the main jumbotron --> part of css:
#leftside{ margin-top: 12px; height:auto; text-align: left; padding: 50px 90px 0px 100px; /*top right bottom left*/ /* edge-right-style: solid; border-correct-width: 5px; border-right-color: F26522; */ border-top-fashion: solid; border-top-width: 1px; border-top-color: b7b8bb; /*to make it non curlicue z-index: 0; position: fixed; top: 50px; left:15px;*/ } #rightside{ margin-elevation: 12px; height:motorcar; background:#FCF; text-marshal: left; padding-left:0px; padding-right:0px; border-top-fashion: solid; border-top-width: 1px; border-top-color: b7b8bb; border-left-style: solid; border-left-width: 5px; edge-left-color: F26522; /* z-alphabetize: 0; position: absolute; right: 0px;*/ }
3 Answers
In the site you mentioned, they are using position fixed for the left side until the screen gets to a certain size and and then it is switched to position relative. You volition but demand to employ a media query.
Hi Chris,
I'm not entirely sure what you're trying to practise hither. The example site has normal page scrolling (i.e. both left and right sides whorl together), at least in Chrome.
That said, you might wait into the overflow css holding. Try overflow:auto for the side you want to roll, and overflow:hidden for the non-scrolling side. You'll probably demand to set a height for the not-scrolling div equally well. CSS-Tricks has a proficient write-upwards on the overflow property: https://css-tricks.com/almanac/properties/o/overflow/.
Promise that helps!
How To Scroll To A Div Without A Fixed Height,
Source: https://teamtreehouse.com/community/making-a-div-not-scrollable-without-using-position-fixed
Posted by: turnergother.blogspot.com
0 Response to "How To Scroll To A Div Without A Fixed Height"
Post a Comment