Html 边栏中断并转到页脚

这是我第一次尝试转换模板，侧边栏一直以最低的显示器分辨率在页脚下运行，但右侧并没有固定

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>

观看
服务器状态
--代码2
传奇城堡
--代码3
问询处
--代码4
前5级
--代码5

Theme.css-文件太大，因此我决定将其托管：

你可以在家里看到它

---

谢谢。

只需在

上方加上
填充顶部：100px
即可

所以结果是这样的

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

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


div.pad-top{padding-bottom:100px}

只需通过更改
100px
来测量所需的
填充顶部的量，只需在
上方给出
填充顶部：100px
所以结果是这样的

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

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


div.pad-top{padding-bottom:100px}

只需通过更改
100px
侧边栏
#侧边栏(u left
)的边距顶部将其向下推，即可测量所需的
填充顶部
。我看到您使用边距将边栏推离标题，但有一种方法可以实现这一点，而无需推送元素，如：（实际上有两种方法可以修复它）

路1号填充/框尺寸组合

// 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;

第二种方式利用其绝对定位

// 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和bottom
同样的东西处理
left和right
如果你把
top:60px和bottom:0
放在这里，它会根据您的
顶部和底部的距离
值，尽管这在很大程度上取决于其父项的高度

在这里，您可以在不推开元素的情况下获得相同的外观。
希望这有助于你的侧边栏
#侧边栏(u left
)有边距顶部将其向下推，这就是你获得意外结果的原因。我看到您使用边距将边栏推离标题，但有一种方法可以实现这一点，而无需推送元素，如：（实际上有两种方法可以修复它）

路1号填充/框尺寸组合

// 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;

第二种方式利用其绝对定位

// 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和bottom
同样的东西处理
left和right
如果你把
top:60px和bottom:0
放在这里，它会根据您的
顶部和底部的距离
值，尽管这在很大程度上取决于其父项的高度

在这里，您可以在不推开元素的情况下获得相同的外观。
希望对您有所帮助
欢迎来到StackOverflow！为了让我们更好地帮助您，请您更新您的问题，以便在问题本身的a中显示您的相关代码。如果您能让我们知道您迄今为止为解决您的问题所做的努力，这也会很有帮助。有关更多信息，请参阅有关的帮助文章，并点击：）欢迎使用StackOverflow！为了让我们更好地帮助您，请您更新您的问题，以便在问题本身的a中显示您的相关代码。如果您能让我们知道您迄今为止为解决您的问题所做的努力，这也会很有帮助。有关更多信息，请参阅帮助文章，并点击：）您好，我做了您所说的，但仍然不起作用，在小型监视器中，侧边栏仍然在页脚上。但是在您的网站上，顶部菜单和侧边栏工作得很好，这个网站上会出什么问题？你能说得更具体些吗？或者你已经得到答案了？我第一次看到顶部菜单和侧栏看起来很奇怪，但现在看起来不错，你能给我一个屏幕截图吗？你说的是小显示器吗？请更新您的问题您好，我做了您所说的，但仍然不起作用，在小显示器中，边栏仍然在页脚上。但是在您的网站上，顶部菜单和边栏工作正常，这个网站会出什么问题？你能说得更具体些吗？或者你已经得到答案了？我第一次看到顶部菜单和侧栏看起来很奇怪，但现在看起来不错，你能给我一个屏幕截图吗？你说的是小显示器吗？请更新您的问题谢谢！像手套一样工作！此外，我还面临着另外两个问题，我真的不知道该如何解决它们。第一个是登录部分，似乎在手机上被破坏了，第二个是移动手机右侧栏，效果也不太好。如果这有助于解决问题，请不要忘记将其标记为答案。如果你的新问题与这个问题无关，那么就针对你遇到的特定问题提问。多谢！但我在左边的边栏中发现了另一个bug，您提供的示例显示了这个bug！条形图有错误，我相信您遗漏了什么，因为我已经检查了
填充解决方案
没有在您的代码中生成，当您删除边距时，您应该将边距顶部值移动到
填充顶部
，然后添加
框大小：边框框
。或者只需添加
top:60px
即可，但它仍然不起作用，而我正在使用like
#