相关疑难解决方法(0)

CSS将Div推送到页面底部

请查看该链接,我想要相反:当内容溢出到滚动条时,我希望我的页脚始终位于页面的完整底部,如Stack Overflow.

我有一个div id="footer"和这个CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

但它所做的只是转到视口的底部,即使向下滚动也会停留在那里,因此它不再位于底部.

图片:

对不起,如果不澄清,我不希望它被修复,只是因为它在所有内容的实际底部.

我有一个独特的情况.

基本上,我有一个绝对定位的文本块,由于设计限制,必须绝对定位.

我还有其余的文本,通常是定位的.但是,我需要阻止我的普通文本与原始文本重叠.

这是否可以简单地使用HTML和内联CSS？我无权访问JavaScript或外部/ head相关的CSS; 只有内联样式可用.我用这个jsFiddle创建了CSS的简化版本.

我在jsFiddle中的大多数代码:

http://jsfiddle.net/MilkyTech/suxWt/

内容应该在白色框中的第一页上加载,溢出的内容会将页面的以下部分向下推.但是,可以看出,下部加载在第一页白框的顶部.我试过改变各个部分的定位/清除但似乎无法创建必要的动作.

<section class="page1">
<div class="huge-title centered">  
    <div id='detailsbox'>
    <h1 id='eorvtitle'></h1>
    <img id='eorvimage' src=''>
        <div><p>lots of text lots of text                   
        </div>
    </div>
</section>
<section class="page2" id='page2'>
</section>

.page1 { 
    background: url('../img/bg.jpg')#131313;
    background-size: cover;
    height: 100%;
    position: relative;
}
.huge-title {
    position: absolute;
    top: -20%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 180px;
}
#detailsbox {
    top: -4em;
    width: 75%;
    left: 12.5%;
    right: 12.5%;
    border: 20px solid white;
    border-radius: 10px;
    background-color: white;
    text-align:center;
    position: absolute;
    float: …

我有一个呈现文本的文本框。该文本框具有最大高度，并且其溢出设置为auto使其可滚动。现在我想介绍一个呈现在该文本框右下角的复选框。为了实现这一点，我将复选框绝对放置在右下角。这已经按预期工作了：

现在我的问题是：是否可以使文本在复选框周围断开，从而防止文本被复选框隐藏？

必须同时实现这一点，同时仍然确保滚动文本时复选框不会移动，并且它应该保留（至少在视觉上）在文本框内。

我已经尝试过使用弹性布局和网格布局方法，但这些方法要么失败，要么因为复选框在滚动过程中移动，或者复选框使用了文本框外部的额外空间，这是我不希望发生的情况。

还有一个相关问题得到了解决方案，但在该问题中，文本不可滚动，因此可以在可滚动文本框中添加一个不可见的间隔符来破坏文本。该解决方案在这里不起作用，因为我们不知道在哪里添加间隔符，因为根据滚动位置，它必须位于不同的位置。

我当前的版本中文本在复选框下方运行（这是不需要的）可以在这个小提琴中找到：

.text {
  white-space: pre-wrap;
  max-height: 8em;
  overflow-y: auto;
}

.read {
  display: inline;
  padding: 8px;
  position: absolute;
  bottom: -2px;
  right: 36px;
  background: white;
  border: 1px solid black;
}

.wrapper {
  position: relative;
}

<div class="wrapper">
  <div class="text">
    Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello …