发表新帖
发表新帖

How can I position my div at the bottom of its container?

前端 未结
关注
24 2426
广开言路
广开言路 2020-11-22 00:46

Given the following HTML:
相关标签:
24条回答
  • 广开言路
    2020-11-22 01:35

    Div of style, position:absolute;bottom:5px;width:100%; is working, But it required more scrollup situation.

    window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}
    0 讨论(0)
  • 攒了一身酷
    2020-11-22 01:37

    Create another container div for the elements above #copyright. Just above copyright add a new div: <div style="clear:both;"></div> It will force the footer to be under everything else, just like in the case of using relative positioning (bottom:0px;).

    0 讨论(0)
  • 终归单人心
    2020-11-22 01:39

    Its an old question, but this is a unique approach that can help in several cases.

    Pure CSS, Without Absolute positioning, Without Fixing any Height, Cross-Browser (IE9+)

    check out that Working Fiddle

    Because normal flow is 'top-to-bottom' we can't simply ask the #copyright div to stick to the bottom of his parent without absolutely positioning of some sort, But if we wanted the #copyright div to stick to the top of his parent, it will be very simple - because this is the normal flow way.

    So we will use this in our advantage. we will change the order of the divs in the HTML, now the #copyright div is at the top, and the content follow it right away. we also make the content div stretch all the way (using pseudo elements and clearing techniques)

    now it's just a matter of inverting that order back in the view. that can be easily done with CSS transform.

    We rotate the container by 180deg, and now: up-is-down. (and we inverse back the content to look normal again)

    If we want to have a scroolbar within the content area, we need to apply a little bit more of CSS magic. as can be showed Here [in that example, the content is below a header - but its the same idea]

    * {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
    <div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>

    0 讨论(0)
  • 南笙
    2020-11-22 01:39

    Don't wanna use "position:absolute" for sticky footer at bottom. Then you can do this way:

     html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }
    <html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>

    0 讨论(0)
  • 粉色の甜心
    2020-11-22 01:40 

     #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
    <div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

    <div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

    0 讨论(0)
  • 太阳男子
    2020-11-22 01:40

    Here is an approach targeted at making an element with a known height and width (at least approximately) float to the right and stay at the bottom, while behaving as an inline element to the other elements. It is focused at the bottom-right because you can place it easily in any other corner through other methods.

    I needed to make a navigation bar which would have the actual links at the bottom right, and random sibling elements, while ensuring that the bar itself stretched properly, without disrupting the layout. I used a "shadow" element to occupy the navigation bar's links' space and added it at the end of the container's child nodes.

    <!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>
    0 讨论(0)
 看不清?
提交回复
热议问题