Question

这是我第一次尝试转换模板，并且侧边栏在最低显示器的分辨率下保持在页脚下方，它没有固定在右侧。

Index.html -

<section id="content_wrapper">
<header id="topbar">
    <div class="topbar-left">
        <ol class="breadcrumb">
            <span class="fa fa-eye"></span> <li class="crumb-trail">Watching</li> - <?php echo ucfirst($subtopic); ?>
        </ol>
    </div>
</header>

<div class="row">
    <div class="col-md-7">
        <?php if ($subtopic == '' || $subtopic == 'home') { ?>
        <?php } ?>

        <?PHP echo $main_content; ?>
    </div>

    <!-- Server Info -->
    <div class="col-md-2">
        <div class="panel" id="p15">
            <div class="panel-heading">
                <span class="panel-title text-info fw700"><i class="fa fa-cog"></i> Server Status</span>
            </div>
            <div class="panel-body pn">
                -- code 2
            </div>
        </div>

        <div class="panel" id="p16">
            <div class="panel-heading">
                <span class="panel-title text-info fw700"><i class="fa fa-calendar-o"></i> Legend Castle</span>
            </div>
            <div class="panel-body pn">
                -- code 3
            </div>
        </div>

        <div class="panel" id="p17">
            <div class="panel-heading">
                <span class="panel-title text-info fw700"><i class="fa fa-info"></i> Information</span>
            </div>
            <div class="panel-body pn">
                -- code 4
            </div>
        </div>

        <div class="panel" id="p18">
            <div class="panel-heading">
                <span class="panel-title text-info fw700"><i class="fa fa-line-chart"></i> Top 5 Level</span>
            </div>
            <div class="panel-body pn">
                -- code 5
            </div>
        </div>
    </div>
</div>

Theme.css - 文件太大所以我决定托管它：http://pastetool.com/pastebin/886681

您可以在http://test.auraot.com

中看到它

感谢。

Answer 1

只需padding-top:100px以上<section id="content_wrapper"> 所以结果将是这样的

    <style type="text/css">
          div.pad-top{padding-bottom:100px}
    <style>

    <div class="pad-top"></div>
    <section id="content_wrapper">

只需更改padding-top

即可衡量所需的100px金额

Answer 2

您的侧边栏#sidebar_left的边距顶部正在推低它，这就是您有意想不到的结果的原因。我看到你使用边距来推动侧边栏远离你的标题，但有一种方法可以实现这一点，而无需推动元素:(实际上有两种方法可以解决它）

WAY no.1 padding / box-sizing combo

// well remove the margin-top
margin-top: 0;
// add it as padding-top instead
padding: 60px 0 40px;
// make the elements size compensate with the padding value this
// means that this padding will not create extra space outside
// element
box-sizing: border-box;

WAY no.2使用绝对定位

// still remove the margin-top
margin-top: 0;
// put it on top instead
top: 60px;
// do not give it a height
height: auto;
// also do not give it a min-height
min-height: 0;
// add bottom 0;
bottom: 0;

此处发生的事情是，position: absolute元素具有此隐藏功能，您可以将其设置为height: 100%，但使用top and bottom相同的内容可以与left and right一起使用，如果您放置top: 60px and bottom: 0它会根据top and bottom值的距离自动填充其高度，但这在很大程度上取决于其父母身高。

你有相同的外观而不会推开元素。希望有所帮助

边栏打破并进入页脚

2 个答案: