0

我已经与这个问题斗争了一段时间，似乎总是用一种方法到达某个地方，只是当我认为我快完成时才发现一个潜伏的问题。

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

请查看此小提琴结果以了解我要做什么；（实际的小提琴在这里）。

最后一个（我希望的）障碍是当有足够的内容来强制滚动时，以某种方式在主文本和红色“按钮”之间添加一个小的、固定数量的空间（比如 30 像素）。但是，我尝试过的所有方法——即边距和/或填充的各种组合——都不起作用。有人可以帮忙吗？

强制代码

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();
});

谢谢！

4

3 回答 3

0

步行到商店并返回以获得一些观点......然后我改变了以下几行：

#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());

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

于 2013-05-27T16:01:23.287 回答
0

您也可以尝试添加：

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

在 alignContent 函数的底部。

于 2013-05-27T15:36:29.673 回答
0

将您的绝对位置交换为明确的：两者？

像这样：

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

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

于 2013-05-27T15:23:50.947 回答