I created a master page with top, left and bottom.But i find out that my left panel which is used for navigation do not grow as the page grow.When data is longer than a page(scroll require), the left panel do not extend itself and hence it leave a ugly space
between the it and the bottom of the page. Below is the picture.
very well answers your situation. Basic concept is that you'll have to have #content div as parent of #navigation div. And have both absolutely positioned. Give #content div height:auto; and #navigation div height:100%. Give the padding to #content div so
that its content starts after the width of #navigation div.
I have try all the suggestion but neither one is working.Deepthoughts i have try ur solution but end up the menu not able to show in navigation panel.Can some one helps!!
The design(div menu) is not working when i insert table to div contentin .The div menu become shoter than the screen unless i specify the table height in pixel like height=1000px.
It has nothing to do with table or any other html control. The logic is fairly simple. The menu div has height:100%; and is dependent on its parent div for its heights (the div with id="content"). So if there is no content or less content in the parent div
then the menu would automatically be small and if it has large content the menu would grow automatically.
Remedy: You've got two options to resolve this issue..
1.) Give min-height to menu div so that it should atleast have certain height and grow from there if the content in parent div increases. So modify #menu style like this..
2.) Give min-height to content div so that it should atleast have a certain height and grow if the content increase. So you can put a min-height style in .contentin class. Like this..
johnsonlim02...
Member
118 Points
287 Posts
Left panel used for navigation do not grow as the page grow.
Dec 25, 2012 11:09 PM|LINK
Hi,
I created a master page with top, left and bottom.But i find out that my left panel which is used for navigation do not grow as the page grow.When data is longer than a page(scroll require), the left panel do not extend itself and hence it leave a ugly space between the it and the bottom of the page. Below is the picture.
Below is my code.
<div id="wrapper"> <form id="form1" runat="server"> <div id="header"> <span class="title">Working with Data Tutorials</span> </div> <div id="content"> <asp:contentplaceholder id="MainContent" runat="server"> </asp:contentplaceholder> </div> <div id="navigation" style="background-color:Aqua; border:2px solid"> <table > <tr> <td><asp:label ID="asd" runat="server" Text="asdasd"></asp:label> </td> </tr> </table> </div> <div id="footer"> </div> </form>Below is the css i used.
#header { border-top: 3px solid #B51032; border-bottom: 1px dotted #B51032; height: 3em; } #navigation { width: 200px; top: 5em; left: 1em; width: 13em; position:absolute; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:90%; height:85%; } #content { margin-top:1em; margin-left: 16em; margin-right: 2em; } #footer{ position: fixed; width: 100%; color:#E1E7EB; height: 30px; bottom: 0px; background-color:#404242 ; font-size: 11px !important; font-weight:normal; }Does anyone has idea how to do this?Help Please!!
Sujeet Saste
Contributor
3008 Points
572 Posts
Re: Left panel used for navigation do not grow as the page grow.
Dec 26, 2012 04:38 AM|LINK
Try following :
#navigation { width: 200px; top: 5em; left: 1em; width: 13em; position:fixed; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:90%; height:100%; overflow: scroll; }Do FEAR (Face Everything And Rise)
Please mark as Answer if my post helps you..!
My Blog
raju dasa
Star
14406 Points
2449 Posts
Re: Left panel used for navigation do not grow as the page grow.
Dec 26, 2012 05:09 AM|LINK
Hi,
check this site for design layout:
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
rajudasa.blogspot.com || blog@opera
deepthoughts
Contributor
7288 Points
1051 Posts
Re: Left panel used for navigation do not grow as the page grow.
Dec 26, 2012 12:43 PM|LINK
This link
http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent
very well answers your situation. Basic concept is that you'll have to have #content div as parent of #navigation div. And have both absolutely positioned. Give #content div height:auto; and #navigation div height:100%. Give the padding to #content div so that its content starts after the width of #navigation div.
Thanks.
vinay13mar
Star
7756 Points
1626 Posts
Re: Left panel used for navigation do not grow as the page grow.
Dec 26, 2012 12:52 PM|LINK
hi remove "height:85%" it will work
V.K.Singh
johnsonlim02...
Member
118 Points
287 Posts
Re: Left panel used for navigation do not grow as the page grow.
Jan 05, 2013 01:03 PM|LINK
Hi all,
I have try all the suggestion but neither one is working.Deepthoughts i have try ur solution but end up the menu not able to show in navigation panel.Can some one helps!!
SOS
deepthoughts
Contributor
7288 Points
1051 Posts
Re: Left panel used for navigation do not grow as the page grow.
Jan 06, 2013 07:41 AM|LINK
Here I created for you a complete example.. please check and let me know if you understand it or not..
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <style type="text/css"> #content{position:absolute; top:0px; left:0px; width:1000px; height:auto;} #content .contentin{margin-left:120px;} #menu{position:absolute; top:0px; left:0px; width:100px; height:100%; background-color:Blue; color:White;} </style> </head> <body> <form id="form1" runat="server"> <div style="position:relative;"> <div id="content"> <div class="contentin"> some content <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> some other content <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> still some other content </div> <div id="menu"> menu content <br /><br /><br /><br /><br /><br /> more menu content </div> </div> </div> </form> </body> </html>Thanks.
johnsonlim02...
Member
118 Points
287 Posts
Re: Left panel used for navigation do not grow as the page grow.
Jan 07, 2013 11:11 PM|LINK
Hi Deepthoughts , it is working !! Love you so much!!
johnsonlim02...
Member
118 Points
287 Posts
Re: Left panel used for navigation do not grow as the page grow.
Jan 11, 2013 08:18 AM|LINK
HI Deepthrought,
The design(div menu) is not working when i insert table to div contentin .The div menu become shoter than the screen unless i specify the table height in pixel like height=1000px.
Below is the code
<div style="position:relative;"> <div id="content"> <div class="contentin"> <%-- some content <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> some other content <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> still some other content <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> here some more--%> <br /> <table> <tr> <td>asdada</td> </tr> </table> </div> <div id="menu"> <%-- menu content <br /><br /><br /><br /><br /><br /> more menu content --%> </div> </div> <div id="footer"> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td align="left"> <asp:Label ID="lblCopyRight" runat="server" Text="<%$ Resources:resource, CopyRight%>" ></asp:Label> </td> <td align="right"> <img src="Image/yokoten.jpg" alt="" /> </td> <td align="right"> <asp:Label ID="lblVersion" runat="server"></asp:Label> </td> </tr> </table> </div> </div>Below is the print screen:
Deepthoughts, can you help?
Can someone help?
deepthoughts
Contributor
7288 Points
1051 Posts
Re: Left panel used for navigation do not grow as the page grow.
Jan 11, 2013 09:27 AM|LINK
It has nothing to do with table or any other html control. The logic is fairly simple. The menu div has height:100%; and is dependent on its parent div for its heights (the div with id="content"). So if there is no content or less content in the parent div then the menu would automatically be small and if it has large content the menu would grow automatically.
Remedy: You've got two options to resolve this issue..
1.) Give min-height to menu div so that it should atleast have certain height and grow from there if the content in parent div increases. So modify #menu style like this..
#menu{position:absolute; top:0px; left:0px; width:100px; height:100%; min-height:1000px; background-color:Blue; color:White;}2.) Give min-height to content div so that it should atleast have a certain height and grow if the content increase. So you can put a min-height style in .contentin class. Like this..
#content .contentin{margin-left:120px; min-height:1000px;}Thanks.