Question

我一直在和这个争吵已经有一段时间了，似乎总是想用一种方法来找个地方，但是当我觉得我差不多完成的时候才发现潜伏的问题。

简而言之，我试图将内容垂直居中于高度等于窗口高度百分比的div中。如果内容高于包含div的内容，则只应滚动内容的某些部分。

请参阅this fiddle result以了解我正在尝试做什么; （实际小提琴是here）。

最后（我希望）的障碍是，当有足够的内容强制滚动时，在主文本和红色“按钮”之间以某种方式添加一小块固定的空间（例如，30px）。但是，我尝试过的所有内容 - 即边距和/或填充的各种组合 - 都无法正常工作。有人可以帮忙吗？

强制性代码

HTML：

<div id="main">
    <div id="box">
        <div id="content">
            <h1 id="heading">HEADING</h1>

            <div id="left">
                <div id="leftContents">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget diam in mi facilisis condimentum. Nullam at arcu erat. Nullam elit libero, sodales sit amet pellentesque et.</p>
                </div>
            </div>
            <div id="button"></div>
        </div>
    </div>
</div>

CSS：

*{
    padding:0;
    margin:0;
}
#main {
    position:absolute;
    top:0; left:0; right:0; bottom:0; background:lightblue;
    text-align:center;
    font-family:arial;
}
#box{
    position:absolute;
    top:15%; bottom:15%;
    background:white;
    left:50%;
}
#content{
    position:absolute;
    width:100%;
    top:50%;
    background:lightgrey;
}
#left{
    float:left;
    width:50%;
    overflow:auto;
    background:lightyellow;
    margin-bottom:30px;
}
#leftContents{
    /*clear:left;*/
}
#button{
    height:30px;
    background:red;
    position:absolute;
    bottom:0;
    left:25%; right:25%;
}

jQuery的：

function alignContent() {
    // Position containing box
    $box = $('#box');
    $box.css({
        'width': $box.height() + 'px',
            'margin-left': '-' + $box.height() / 2 + 'px'
    });
    // Size & position content area
    $content = $('#content');
    $content.css({
        'max-height': $box.height() - 72 + 'px',
            'margin-top': '-' + ($content.outerHeight() / 2) + 'px'
    });
    // Left panel sizing
    $left = $('#left');
    $max = ($box.height() - 72 - 30 - $('#heading').outerHeight());
    $left.css({
        'max-height': $max
    });
}
alignContent();

// Update when resized
$(window).resize(function () {
    alignContent();
});

$(window).load(function () {
    alignContent();
});

谢谢！

Answer 1

将你的位置换成绝对的：两个？

像这样：

#button{
  height:30px;
  background:red;
  position:relative;
  clear:both;
  left:25%; right:25%;
}

如果您需要底部的按钮，即使内容很少，也可以在浮动div上使用最小高度。

Answer 2

您也可以尝试添加：

    $('#button').css('top', parseInt($content.css('max-height')) - ($('#button').height()) + 'px');

到alignContent函数的底部。

Answer 3

它走到商店然后回去获得一些观点...然后我改变了以下几行：

#left{
    float:left;
    width:50%;
    overflow:auto;
    background:lightyellow;
    margin-bottom:30px;
}

成了

#left{
    float:left;
    width:50%;
    overflow:auto;
    background:lightyellow;
    margin-bottom:60px;
}

和

$max = ($box.height() - 72 - 30 - $('#heading').outerHeight());

成了

$max = ($box.height() - 72 - 60 - $('#heading').outerHeight());

希望如果我不得不离开它几天，这将教会我更详细地评论代码。

垂直居中的流体布局与浮动但不能添加可见边距

3 个答案: