Replies

Nov 14, 2017 8 years ago
winterykite
is a bad omen
User Avatar

So the CSS Compendium thread talks about how you can limit scrolling within a div, so you can do the thing where you click on an anchor link and it shows you a different section which you can't scroll beyond. I have the anchor links in my main CSS dump section, which looks like this:

<style> * {margin: 3; padding: 0;} {display: none;} .block, .info_block {background: transparent; border: 0; border-radius: 0; -moz-border-radius: 0;} .header {background: transparent; padding: 0; border: 0;} body {background: ;} .column {border:none;} .header {background-color:transparent; border-bottom:none; text-align:right;} { position:absolute; left: 10px; top: 10px; width: 300px; height: 750px; overflow: auto;} { position: absolute; left: 320px; right: 10px; top: 10px; width: auto; height: 750px; overflow: auto; } {display:none;} li { background-color: ;} li { background-color: ;} {width: auto; height: auto; overflow: hidden!important;} , , , , , , , {display: block; width: auto; height: auto; overflow-y: auto!important;} </style>

While the divs in question are in a different section, the code of which looks like this (with irrelevant content removed):

The link anchoring itself works. The part where only the div in question is shown doesn't, I can just scroll over the entire content div. Copying the style data for the divs in question into the other section doesn't work either. My question would be, how do I get only one of the divs to show?

My second question is: With the width: auto; line I can adjust my profile width to screen width, but the same doesn't work for height: auto;, which adjusts according to amount of content. How do I adjust the profile height to screen height?

A strange buzzing sound, occasionally varying in pitch. Speak wind, and cast the world into chaos.

Nov 16, 2017 8 years ago
Silverfish
is a survivor
User Avatar
Xingese

Ok so the way this trick is supposed to work is that the container div is forced to be smaller than the total sum of its own content. 'auto' is the default value for any element anyway, even with no dimensions declared. It's kinda a browser 'I do what I want' value. You might be overriding some sort of value of a subeta profile, but you are essentially doing... nothing. Not the best start.

Now, height/width:x% looks more promising as a possibility, but in my experence this will only do specifically what you want it to do, if there is an actual height in px specified somewhere, otherwise it kind of all starts falling apart. I might be missing somthing there, but- yep.

May I recommend the :target pseudo-class instead?

show me example | close example

this is an example div. You can't see it by default.
<style> {display:none;} :target {display:block;} </style>

it works the same as :hover you may be familiar with, except the desired change happens on the element being linked to withing the page, not on mouseover. The idea is that the element is hidden by default. If you then click on a link to another element or on empty '#' link it vanishes again. Also, you should be able to do the width/height:x% thing on them just fine.

Art by p-sebae ❤️
| | -Night Mode- Shengui Guo Custom CSS [v2.0]

Looking to adopt a December 31st, 1969 glitched date pet

Dec 16, 2017 8 years ago
winterykite
is a bad omen
User Avatar

First of all, thank you for taking the time to respond. Apologies for my late reply, real life got the better of me.

And thank you for explaining to me how it works and what mistake I made. IT seems like going via jQuery might be easier, espc since I like my webdesign responsive...

A strange buzzing sound, occasionally varying in pitch. Speak wind, and cast the world into chaos.

Dec 17, 2017 8 years ago
Hongske
is lost in space
User Avatar

Hey there! To make something 100% your screen width/height, you can use the vw or vh units. For example "width: 100vw;" will make an element the full width of your screen and "height: 100vh;" will do the same with the height. Hope that helps :)

Please log in to reply to this topic.