Im trying to setup my asp.net mvc page like the following image:
The header and bottom bar should always stay the same size and dock to the top and bottom of the page. In the middle is a infragistics jgrid that i want to always take up the center area of the page, so it should shrink and grow with the browser window.
So Im at a bit of a loss on how to dynamically change the div sizes and location when the browser window size changes.Any ideas/examples?
Thanks
http://jsfiddle.net/kdKCT/1/ i hope this will solve your problem. you can set the position property of header and footer to fixed so when your content scrolls while header and footer stay at the same place in your browser window.
Related
I'm setting up a new page. In the CFM after /head, I have a /body and then a /div for my full page background followed by various forms and tables. Using CSS, I have moved said forms and tables up the page so that nothing extends beyond the bottom of the vertical scroll bar which is 1/3 up from the page bottom. When I scroll down, the background moves up and there is nothing to see and when I use Firefox Inspector, the only things extending beyond the scroll bar is html and body. Their css setting are "height: 100%;". So, why the scroll bar? ps. I'm pretty new to this....
I'm trying to enable browser scroll bar in my website but didn't work.
This is the site online : http://guillaumeruiz.com
All projects in this "gallery" are hidden and visible with a hide Id function. I used a left-right-top-bottom fixed divs for the red window border. And, every div project have a fixed position too to cover the main gallery.
If you can help me please... thank you
I am struggling with an issue I can't seem so solve by myself. Perhaps you can shed some light on it. The issue is concerning a responsive website using Bootstrap 3.
The issue
The main content is horizontally and vertically centered. The header with navigation is fixed to the top and the footer is fixed to the bottom of the page. Perfect!
Check http://www.domains.cloudlabz.nl in a desktop browser for a working example.
The problem occurs when the main content gets too high. The header and footer do what they're supposed to do: stick to the top and bottom. But when the main content gets high, that's - in my case - unwanted.
Check http://domains.cloudlabz.nl/domains.php to see what happens or decrease the height of your browser window.
You'll see the header and footer overlapping the main content. That's a no-no for me.
What I would like
I would like the header and footer to stick to the top and bottom of the page like they do now, but when the main content gets (too) high I would like the header and footer to scroll with the main content. Like if they're stacked on top of each other.
Best regards, Peter de Leeuw
I have a similar problem as Stackoverflow.com web site has. The problem is width a banner above the content or body of the web site. I want to be able to reduce the width of the browser page but keep the size of the banner no matter what resolution is running the browser.
Example, if you reduce the width of this page you will see that a scroll bar will appear so you can move the page to the right and see the content hide. However, if you look at the banner the banner will have the new width that was reduced the page.
If i understand correctly may be you can define min-width in to the body. Write like this:
body{
min-width:975px;
}
It's mostly happened when the element have auto width & his parent didn't have any width define.
I'm using VS2010,C# to develop my ASP.NET web app, I'm going to insert a fixed header on top of my pages so that my content area has a smaller width and these fixed DIVs are always on top of my page, in this way contents should start displaying from bottom of DIVs and not from screen top, I'm not going to use master pages, what are my options? how should I arrange my page?
thanks