Question

我已经搜查过了。我试过了。什么都没有用。我是一个新手，但我之前没有任何问题。它与flexbox粘性页脚有关吗？我之前没有这样做过。我没有看到这种联系，但谁知道呢。我只需要一个主要部分和侧边栏。我不能那么难。提前致谢。这是我的代码： HTML：

<section>A technology services company supporting the solid rocket motor industry, airbag igniters, as well as Statistical Process Control support and training for manufacturing industries in general.</section>

<aside class="sidebar">Content for  class "sidebar" Goes Here</aside>

<footer>
  <div class="footer-wrapper">Content for  class "footer" Goes Here</div>
</footer>

</div></body>
</html>


section {
    display: block;
    width: 65%;
    float: left;
    background-color:#999999;
    padding: 20px;
    font-size: 1.5em;
    flex: 1 0 auto;
}
.sidebar{
    display: block;
    background-color: #F9E903;
    width: 25%;
    height: auto;
    padding: 0px;
    float: right;

}
footer {
    clear: both;
    background-color: black;
    font-size: 1.1em;
    color: white;
    padding: 15px   
}

Answer 1

它适用于我的移动设备，此时问题是你在截面元素上的20px填充正在弄乱你的百分比。你可以这样做来修复它，我也增加了10％的部分，所以中间没有10％的额外空间，但是你可以把它减少到65％，如果这样的话：

section{
  width: calc(75% - 40px);
  padding: 40px;
}

每当您使用某个百分比宽度并且具有边距或填充的像素值时，请确保使用calc从宽度中减去累积像素值，否则它会导致问题缩放。

Answer 2

＆＃13;

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

p {
  padding: 1em;
  }

section {
    width: 75%;
    float: left;
    background-color:#999999;
    padding: 0;
    font-size: 1.5em;
}
aside {
    background-color: #F9E903;
    width: 25%;
    padding: 0px;
    float: right;
}
footer {
    clear: both;
    background-color: black;
    font-size: 1.1em;
    color: white;
    padding: 15px   
}

＆＃13;

<html>
  <body>
<section>
  <p>A technology services company supporting the solid rocket motor industry, airbag igniters, as well as Statistical Process Control support and training for manufacturing industries in general.</p></section>

<aside class="sidebar"><p>Content for  class "sidebar" Goes Here</p></aside>

<footer>
  <div class="footer-wrapper"><p>Content for class "footer" Goes Here</p></div>
</footer>

</body>
</html>

＆＃13;

您需要1. box-sizing：border-box和2.您不需要显示：block，html5元素已经是块元素。我也在应用填充到部分内部的段落，除此之外，如果你直接添加填充它会扰乱布局的宽度，他们不会工作。

Answer 3

添加全局框大小调整，如下所示

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box: -ms-box-sizing: border-box: box-sizing: border-box; }

以上内容会将您的填充，边距和边框添加到任何块和内联块元素中（例如您添加到部分中的padding: 20px）。

然后从旁边和部分删除display: block;（它们已经是块元素）

边栏不会向右浮动

3 个答案: