相关疑难解决方法(0)

我们有很多选项可以使用jQuery和JavaScript来获取元素的高度.

但是我们怎样才能使用CSS获得高度？

假设,我有一个动态内容的div - 所以它没有固定的高度:

.dynamic-height {
   color: #000;
   font-size: 12px;
   height: auto;
   text-align: left;
}

<div class='dynamic-height'>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>

我想设置margin-top的.dynamic-height一个值等于(the height of the div - 10px)只使用CSS.

如果我得到高度我可以使用CSS calc()功能.

我怎么做？

我正在尝试使用这个粘性页脚:

http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

body{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content{
  flex: 1;
}

但它在<768px宽度处弄乱了渲染.

任何简单的CSS修复,以使其适用于所有分辨率？

http://jsfiddle.net/2xvv5mod/

我需要把一个棘手的页脚我的网页上,但我没有一个明确的高度,我的页脚设置.在较小的屏幕上 - 行调整大小,页脚变长.

因此,getbootstrap上提供的默认粘性页脚示例不起作用,因为它需要固定的页脚高度.

有没有办法实现这个？

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > …

我对此非常陌生，并使用 HTML 和 CSS 构建我的第一个网页。我一直在使用 Bootstrap 4.5 框架。我试图让带有社交媒体图标的页脚保持在底部（文本下方）并保持居中。我希望它即使超过视口也保持在底部。

我尝试过：使用flexbox和justify-content-center，尝试在CSS本身中使用文本对齐中心，还尝试添加一个id以使其更具体，但不确定我对这种情况下的特殊性的理解是否正确。希望得到一些建议，代码如下。

HTML：

<div class="footer">
    <span id="bottom"> 
        <hr>
        <p>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-facebook"></i></a>
       </p>
    </span>
</div>

CSS：

i {
    margin: 5px;
    color: #FFE10E;
}

.footer {
    position: absolute;
    bottom: 0;
    text-align: center;
}

#bottom {
    text-align: center;
}