I'm struggling to create a very simple layout of header and 2 column content - left navigation and right content (http://jsfiddle.net/WsQbs/4/).
What I cannot achieve is having menu and content take 100% height of the page (not just window), while having a vertical line (border) between menu and content. The problem is that when positioning content absolutely and any of the 2 columns have enough content, so that scrollbars appear, the background and border of corresponding divs still only take 100% of the window, not full height of the content.
the absolute position prevent it from you want. is this what you want? http://jsfiddle.net/bingjie2680/WsQbs/6/
update: http://jsfiddle.net/bingjie2680/WsQbs/8/
Related
I have two divs, one is a sticky element and the other is a footer at the bottom. The site has enough height so that it's scrollable and the footer is not visible intially. What I need to achieve is, when I scroll down and the sticky element meets the footer, the height of the sticky element should be dynamically reduced in such a way that it still touches the footer but doesn't cover it up. When the sticky element's height gets too small and the content overflows, a scrollbar should appear. Is it possible to achieve this with pure CSS?
This is my current code:
https://jsfiddle.net/co7dty0p/
I am trying to create a website which has a sidebar on the right which is fixed to the screen and takes up 100% of the page. I want my container's width set as 100%, filling the remaining space after taking account for whatever the width of my sidebar is. I need the sidebar to remain stationary as the user scrolls down the page. I would like the height of my sidebar to be a percentage based value. How would I go about doing this?
If I were to use "Position: fixed", it would take the sidebar out of flow causing the container to span the whole width of the page, ignoring the width of the sidebar. This causes issues when I try and apply "text-align: center".
Here is a visual representation of what I am trying to achieve:
Just put .body{ margin-right: 80px} (i.e. the size of your sidebar) and then position fixed on your sidebar.
Check it out here: http://jsfiddle.net/vv84cd08/1/
I am using bootstrap to design web application. I have two main divs, sidebar div with span 2 which has position : fixed and right div which is of span 10. These divs has float : left property as per bootstrap css file as I am using row-fluid class.
So the problem I am facing is when window size is reduced after certain limit, user is able to scroll the content of right div and which is overlapping with left div. So I want hide the content of right div which overlaps on left div ( ie. left div, the fixed div, should behave like a left wall of browser window for right div).
I have tried using overflow property and also tried changing z-index of divs, but nothing seems to be working here.
jsfiddle link - here is the link I have reproduced the problem, there if you scroll left in result area, you can see the content of right div is overlapping with left div(nav list), as I have given left-margin : 240px to rightDiv. So what I want is, the right div content should not overlap left div, and it should be hidden behind.
Any suggestion on how to get it right or is there any other way to achieve the same?
I'm not 100% sure exactly what you are trying to do. If it's just hiding whatever is overlapping then applying a background-color to the fixed div will achieve this.
JSFiddle.
You can left padding equal to the width of left navigation to prevent the overlapping (imitate)
padding-left:140px;
JSFiddle
depending on the content in my page how can I get the footer at the bottom ?
In gridview if i select page size above 20 the footer is overlapping on the gridview box.
I tried the CSS property - position:absolute,bottom:0; as well as overflow:auto...
It dint help the footer is remaining in the same place behind the gridview.can someone pls help me
Thanks.
Check this fiddle:
Format your page layout as in the fiddle. set the min-heightof your container div to
total height - (height of header + height of footer)
(in the fiddle header and footer occupy 15% and 10% height respectively. so the content is given
min-height:75%; // 100%- (15%+10%)
so that it'll always occupy that much space even if your actual content is less.
If your content is more the container div will automatically expand and pull down your footer.
if you apply position:absolute your element will be taken out of the normal flow, then the footer won't be pulled down by the content if it expands.
My code is as below:
<div id="frame1" style="overflow-y: auto;overflow-x: auto;width:87.5%;height:100%;" >
content
</div>
Here declared div working as a scrollable div but it doesn't resize as per window resize.
I have a situation where I need, on the same line, When the window is resized and the div's
eventually touch, I need them NOT to wrap, but instead, enable the horizontal and vertical scrolling.
Please Help...
<div id="frame1" style="display:block; width: 87.5%">
content
</div>
Height will increase based on content
Not quite sure what you are trying to do here. I'm guessing you have 2 div's next to each other and you want one of them to start scrolling when the space is too small for them both. If you know the width of the other div you could just do something like right: *div width* which would make the 'frame 1' div fill the rest of the space when the width was set to 100%. Then if the content of this div were too large for that div, scroll bars should appear. You would obviously need to set the position value to something other than static to get the top, right, bottom or left css values to have an affect.
I recently used something similar to this on a site with 3 fixed div's; a header, a footer and the main content. For the content, I have top set to the height of the header and bottom set to the height of the footer with a height value set at 100%. This makes the content fill the space between the header and footer. I then set the overflow-y value of the content to scroll so the vertical scroll bar is always visible but it is only on the content as the header and footer don't scroll anyway which gives a really nice effect, especially with webkit scroll bars.
Again, I'm not really sure if that was what you were asking. Temporary link to site here (resolution-gaming.comuf.com).