Codepen
Hello,
I'm desperately looking for a simple solution to my problem, my code is available on codepen.
// line 84
.panel-group .panel-heading + .panel-collapse > .panel-body {
border: none;
max-height: 300px;
overflow-y: scroll;
}
The objective is to keep the pink footer always visible (pasted at the bottom of the screen), even if the content is too large (like the panel 3 when it is open).
I tried putting a vertical scroll when the content is too large, but I'm not sure how to use max-height in the best way (currently at 300px, line 84).
This solution does not really work, it is not suitable for those with large screens (because max-height: 300px ...).
Would it be possible to do what I want directly in CSS? If so, can you guide me?
Or Javascript is mandatory according to you? The background-gray of the panel must cover the whole area, down to the bottom, with any resolution.
Thanks !
In my opinion, you should break the footer out of the modal and display it separately because the modal is already a fixed element. You could hook into js modal events and display this standalone footer only when modal is opened.
.modal-footer.outer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
background: #fff;
}
http://codepen.io/anon/pen/XpbYeE
Your modal footer was being fixed, it actually was behaving properly, the problem is that it's still a child of another fixed item - the modal itself and thus gets detached when the viewport gets too small for the parent.
http://g.recordit.co/pyMEfO94wE.gif
.modal-body
{
overflow-y:scroll;
height:400px;
}
Your modal body can be made scroll-able to keep footer always visible.You can use any height you want.
Related
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.
Please visit my website at http://amrapps.ir/personal/indexbug.html
to visually see my problem.
Let me explain my problem:
In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.
Then it is the red div which takes 75 % of browser width.
When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.
Then you can click on go to top on the fixed div above to get back to red div.
Navigations are working well but there's a problem.
When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?
thank you for your effort.
Change your #aboutmore class to the below css:
#aboutmore {
background-color: #FFCE85;
margin-top: 5px;
top: 25%;
position: absolute;
/* height: 74%; */
width: 100%;
min-width: 1130px;
bottom: 0px;
z-index: 3;
}
Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.
First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.
Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.
Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.
I'm going to add some code here to help with a fixed header:
div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}
Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?
I often run in the following problem, I have a web page with the following divs:
header
sidebar
content
footer
sidebar and content are both float left with a break afterwards.
I want content to expand to the right edge of the browser, no matter how wide or narrow the browser width.
However, no matter what I try, I am face with two choices:
content must be a fixed width
content is not a fixed with (no width property) but resizing the browser pops the content down under the sidebar
The site I'm working on has many more divs than these four so it's hard to post CSS code that is not convoluted, but does anyone have a general strategy to enable content to expand out to the browser's right edge while never popping under sidebar if browser width is made too small?
My current solution is: table.
Addendum 1
Thanks Hristo, your solution works except that sidebar and content can't have fixed heights, which causes the footer to appear in the middle. Since you aren't using floats, how do you make the footer come after both of them?
You should be able to set a margin-left to the #content and position:absolute to the #sidebar.
For example:
<div id=wrap>
<div id=content>
...
</div>
<div> id=sidebar>
...
</div>
</div>
and some css
* {
margin: 0;
padding: 0;
}
#content {
margin-left: 200px;
background: green;
}
#sidebar {
width: 200px;
position: absolute;
top: 0;
left: 0;
background: pink;
}
and the example:
http://jsbin.com/umomuk
This is the same solution that google uses on their search result pages.
UPDATE
http://jsfiddle.net/UnsungHero97/ABFG2/10/
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/ABFG2/2/
Let me know if you have any questions. I hope this helps.
Hristo
On solution will be to use the minimum width:
.containerDiv {
min-width: 600px;
}
if the div is greater than 600px it will just expand, and if the window is resized to a lower value the minimum width will be 600px. However, some versions of IE doesn't support this property, a different solution will have to be implemented for IE.
This link suggest a hack, but i have not tested that personally.
CSS play
I have a website scrolling horizontally using this script:
http://tympanus.net/Tutorials/WebsiteScrolling/index.html
Sometimes with this build I end up with a vertical scrollbar because, depending on the user's resolution, the copy may run further down the visible portion of the page.
I have a bit of footer information that I want to scroll along with the page horizontally, but I want it to always be at the VERY bottom of the page if there is a scrollbar, not just the window. Using this CSS:
.footer { position: fixed; bottom: 10px; left: 100px; }
Doesn't do what I want because the footer will overlay the site's copy.
So I also tried something like this:
html, body { min-height: 900px; }
.footer { position: fixed; top: 880px; left: 100px; }
Which also didn't work because the information was still always pushed off the visible portion of the page.
So I'm looking for a solution to essentially let the footer information lay wherever it naturally falls on the page, but always fixed 100px from the left as the page scrolls horizontally.
Thanks for any help!
I'm not sure you can do this entirely with CSS. I would make a javascript (or jquery) function that detects the size of the content div (or body) and positions your footer div after it (with offset if you're using jquery, or by manipulating the top margin if not). Then you can use the .scroll method on the window to move the div's horizontal position when a user scrolls to the right.
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }