MadnessRed Posted February 13, 2009 Share Posted February 13, 2009 I have a div which can longer than the page is high, so what i did was a bit of php so that if the number of lines inside the div was greater than X then it put a scroll, if not it didn't. However what I have is that some times the rest of the page will mean that the page needs a scroll anyway so 2 scrolls is pointless. What I want is for the div to be as high as possibleble without changing wher the bottom of the page is. Is that possible with css? [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
alphanumetrix Posted February 13, 2009 Share Posted February 13, 2009 I'd have to see your code (and your site maybe), but you should be able to just set the height to what you want and set the overflow function to auto with CSS for that DIV tag. That will give you the whole size of the screen, and if the content exceeds that, it'll give you a scrollbar without increasing its size. Using PHP sounds a little crazy to me. Given you resorted to that, I'm assuming you don't know CSS, or at least, you're not very familiar with it. Here's a little run down of how you'd set it up: First, you create a file and name it style.css. Then you link it to your index: <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div></div> </body> </html> Then you define an ID for your DIV tag: <div id="content"></div> Then you open your CSS file, and put the following code into it: div#content { /*notice the hash in front of "content" - this defines the class in CSS */ height:100px; /* this is where you put the height of your DIV area */ overflow:auto; /* tells the browser not to expand when the space is exceeded, but rather create a scrollbar */ } That should do it though, given what I've read. You really should give examples in the future though; it makes it easier. Although, I do like the puzzle. Quote Link to comment Share on other sites More sharing options...
MadnessRed Posted February 13, 2009 Author Share Posted February 13, 2009 I'd have to see your code (and your site maybe), but you should be able to just set the height to what you want and set the overflow function to auto with CSS for that DIV tag. That will give you the whole size of the screen, and if the content exceeds that, it'll give you a scrollbar without increasing its size. Using PHP sounds a little crazy to me. Given you resorted to that, I'm assuming you don't know CSS, or at least, you're not very familiar with it. Here's a little run down of how you'd set it up: First, you create a file and name it style.css. Then you link it to your index: <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div></div> </body> </html> Then you define an ID for your DIV tag: <div id="content"></div> Then you open your CSS file, and put the following code into it: div#content { /*notice the hash in front of "content" - this defines the class in CSS */ height:100px; /* this is where you put the height of your DIV area */ overflow:auto; /* tells the browser not to expand when the space is exceeded, but rather create a scrollbar */ } That should do it though, given what I've read. You really should give examples in the future though; it makes it easier. Although, I do like the puzzle. I know css ok-ish, I just used php to decide weather to have a scroll or not. Anyway, the auto sorted that our pretty well. Though its not really my porblem, what I want is to set the hight of the div, at the moment its set to 600px but I want it to go right to the bottom of the page but no further, baring in mind that browser window sizes can change. Quote Link to comment Share on other sites More sharing options...
alphanumetrix Posted February 13, 2009 Share Posted February 13, 2009 so sorry. i didn't mean anything by that. umm... I don't think I'm thinking as clearly as I usually do, so this might not be the best method of going at it: If the heights of the elements above it are defined, then add them up. After which, move the position of your DIV to wrap around all of your other elements. Then set its height to 100%. After which, create a new DIV, give it a class, be sure you give it no background, and no height. Make the width of the new one, the same width of your previous (if you have a width). Then make its position absolute, and define "top:" in CSS as the total height of your above elements in pixels. Then use that new one as your content space. As I said, it may not be the "best" way, but that way will definitely work. With no offense to you, here is an example of it'd be set up: HTML Before Changes: <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div height=5></div> <div height=5></div> <div id="content"></div> </body> </html> HTML After Changes: <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="content"> <div height=5px></div> <div height=5px></div> <div id="newcontent"></div> </div> </body> </html> New CSS: div#content { height:100%; width:500px; background:whatever; } div#newcontent { /* remember, don't define the height for this */ width:500px; position:absolute; top:10px; /* because the elements above it add up to this */ overflow:auto; } That should do exactly what you're looking for. The only problem is, I'm not sure if the overflow function will work in that scenario. You're going to have to test it, I guess. Again, I could be thinking less clearly. If I think of something better, by chance, I'll let you know. Quote Link to comment Share on other sites More sharing options...
MadnessRed Posted February 19, 2009 Author Share Posted February 19, 2009 ok many thanks. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.