Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I can't seem to find the exact answer I'm looking for online, but the problem is that I'm not even sure what to look for.
When you enter the homepage, I want a div to be stuck to the bottom (for any device) and when you scroll. But I do not want it fixed so that it scrolls with the screen.
I'm sure this is some responsive trick that I'm overlooking, but I'd love some feedback. Thank you in advanced!
EDIT: I do not want the div to follow you upon scrolling. But I do want it to appear to the very bottom of the screen when you first view the site (no matter the platform you are using to view the site.)
Example is this site. The down arrow appears in the same spot for all devices, but does not scroll with the user: https://www.nabitablet.com/
You might be able to use an absolutely positioned container sized to the window, then absolutely position the item to the bottom of that. Depending on your page structure, this might not work.
body {
height: 5000px;
}
.container {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.item {
background-color: #f00;
bottom: 0;
height: 50px;
position: absolute;
width: 100%;
}
<div class="container">
<div class="item"></div>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
So I’m trying to redesign my website to keep the header at the top of the screen and let the rest of the page scroll beneath it. I did some research and found a nice JSfiddle that explained what I needed to do: http://jsfiddle.net/austinbv/2KTFG
#header {
position: fixed;
top: 0px;
height: 20px;
width: 100%;
background: green;
}
#body{ margin-top: 30px; height: 3000px; overflow: auto; }
<div id='header'>hello</div>
<div id='body'>skdfl</div>
I added the 2 DIVs to a Dreamweaver template and then the CSS. I then broke my page up into 2 portions and placed each in the corresponding DIV. Now when I view the page in the browser, the bottom div refuses to extend far enough to show the contents within. it stops at the bottom of the screen, not the bottom of the contents. See the example at http://www.rcda.org:81/index2.html
I researched the net and found people saying that the contents of the DIV are somehow floated and above the div causing the div to not expand. I did not float the contents.
What can I do to get body div to expand to the height of its contents?
On your div#body (random div..), you have overflow:hidden- with a fixed height, this is hiding anything below the fixed height.
Take off overflow: hidden; on the body css in index2.html
#body {
margin-left: auto;
margin-right: auto;
margin-top: 203px;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
On this template: GYM
If I add add more text under the welcome title, the form is lowered down and then disappears (class .home has overflow: hidden).
If I make it visible then will be over the section under it. What I want is the div's height to be modified depending on the text that I add, to show all the content and then start the other section (w/o a scroll for the div -> overflow: scroll)
Thanks!
Make the form position:relative; and the carousel position:absolute; (with extra positioning).
This will make sure the height will adjust, but still allow the carousel to flow in the background.
Edit (this is what I used):
.home form {
background-color: rgba(0,0,0,0.3);
height: 100%;
padding-top: 150px;
position: relative;
width: 100%;
z-index: 90;
}
.carousel {
position: absolute;
top: 90px;
left: 0;
width: 100%;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have researched a bit and saw many examples about how developers use this technique to full screen a container and the most used are:
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
and
html, body{
height: 100%;
margin: 0;
}
.container {
min-height: 100%;
margin: 0;
}
These are the most used methods to extend a div in full screen when the container is the child of body.
If you ask me, the method using absolute position is not a very good idea because if you put other elements inside you can not relate to it because they have an absolute position.
The method using HTML and body 100% seems to be a little bit rudimentary.
So, what is the best way to extend a container?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I can't find how to do something that should be very simple. I want to divide page to two panes horizontally. Between the panes there's some border (wheter it can be resized or not I don't care). The upper pane can scroll vertically, while the lower pane stay fixed.
I tried bootstrap sticky fixed footer, but I don't have scroller for top part there.
My eventual goal is to insert all kind of links in bottom fixed pane that will help navigating to places in the top pane.
Thanks in advance
Here is an option where your elements will take whole screen. If you want to limit their size to bootstrap container you need to put them in container and give it style of position:relative
<div class="upper">This will scroll</div>
<div class="lower">This will not</div>
.upper, .lower {
position: absolute;
left: 0;
right: 0;
}
.upper {
top: 0;
height: 50%;
background-color: pink;
overflow:scroll;
}
.lower {
bottom: 0;
height: 50%;
background-color: blue;
}
Fiddle: http://jsfiddle.net/jGBh3/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am just wondering if there is any solution for a scrollable area (ie overflow: scroll) with the scrollbar hidden? I didn't find a solution while googling it so i ask here. It would be cool if this is possible with CSS. But if there is a solution with JS or php I'd still like to know.
By absolute positioning a container in an outer container that is relative positioned with hidden overflow you can hide the scrollbar of the inner container outside of the first.
So the scrollbar is still there, but you won't be able to see it.
#outer {
position: relative;
width: 200px;
height: 300px;
padding: 0;
margin: 0;
overflow: hidden;
}
#inner {
position: absolute;
left: 0;
top: 0;
right: -30px;
bottom: 0;
padding-right: 15px;
overflow-y: scroll;
}
JSFiddle:
http://jsfiddle.net/g6URf/