如何才能获得侧边栏高度以适应主要内容框？

时间：2017-02-03 15:56:51

标签： html css

我是一个非常初学者，我已经在谷歌上搜索过但无法得到合适的答案。我做了一个2列简单的网站，我想要的是侧边栏（class =＆＃34; sideright＆＃34;）以匹配相邻主要部分（分别）的高度。这是我可以单独使用CSS吗？

＆＃13;
＆＃13; 
.main {
    
    background-color: #e5e4d7;
    border-radius: 5px;
    margin: 10px 340px 10px 10px;
    padding: 10px;
    font-size: 1.1em;
}

.sideright {
    background-color: #e5e4d7;
    border-radius: 5px;
    margin: 0px 10px 0px 10px;
    padding: 10px;
    font-size: 1.1em;
    float: right;
    width: 300px;

}
＆＃13; 
 <div class="sideright">
        <h2>Sumthing</h2>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
    </div>


    <div class="main">

        <h1>This is a brilliant paragraph</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>


    </div>
    <div class="sideright">
        <h2>Anything</h2>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
    </div>

    <div class="main">
        <h1>This is a brilliant paragraph</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>
    </div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您可以使用flexbox属性：

  • display:flex CSS网格系统。
  • flex-flow:row-reverse设置右侧的右侧栏，反转流程，而不是页面方向
  • flex : 1 0 XX调整大小并设置框行为
  • calc()最终在这里很有用。

.main,
.sideright {
  background-color: #e5e4d7;
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
  font-size: 1.1em;
  flex:1 0 calc(100% - 380px);
}
.sideright {
  flex: 1 0 300px;
}
body {
  display: flex;
  flex-wrap: wrap;
  flex-flow:row-reverse;
  width:100%;
  margin:0;
}
<div class="sideright">
        <h2>Sumthing</h2>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
    </div>


    <div class="main">

        <h1>This is a brilliant paragraph</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>


    </div>
    <div class="sideright">
        <h2>Anything</h2>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
        <p>sum</p>
    </div>

    <div class="main">
        <h1>This is a brilliant paragraph</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>
    </div>

如果您不想使用弹性属性，

您可以使用表格属性，但每个方框都需要包装在一起。

  • display:table;，display:table-row;，display:table-cell;
  • table-layout:fixed + width
  • border-spacing代替margin
  • direction设置并重置方向

.main,
.sideright {
  background-color: #e5e4d7;
  border-radius: 5px;
 /* margin: 10px; use border-spacing instead */
  padding: 10px;
  font-size: 1.1em;
  direction: ltr;/* reset flow to left to right */
  display: table-cell;
}
.sideright {
  width: 300px;
}
.row {
  display: table-row;
}
body {
  display: table;
  table-layout: fixed;/* make sure it won't expand */
  width: 100%;
  margin: 0;
  border-spacing: 10px;/* instead margin unavalaible for the children boxes */
  direction: rtl;/* reverse flow direction */
}
<div class="row">
  <div class="sideright">
    <h2>Sumthing</h2>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
  </div>


  <div class="main">

    <h1>This is a brilliant paragraph</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices
      diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis
      non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices
      diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis
      non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula.</p>


  </div>
</div>

<div class="row">
  <div class="sideright">
    <h2>Anything</h2>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
  </div>

  <div class="main">
    <h1>This is a brilliant paragraph</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices
      diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis
      non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices
      diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis
      non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula.</p>
  </div>
</div>

答案 1 :(得分：1)

您可以使用flexbox实现此目的。但是，如果可能的话，我会对您的HTML进行一些更改...

将侧边栏和内容包装成一排。当你在它的时候，在行内交换他们的位置。 

<div class="row>
  <div class="content"></div>
  <div class="sidebar"></div>
</div>

然后只需将display: flex添加到.row。

然后，您可以通过删除已添加的某些margin属性来进一步简化CSS。

要确保您的侧边栏宽度得到尊重，请使用min-width代替width。

CODEPEN

<强>段：

＆＃13;
＆＃13; 
.row {
  display: flex;
}

.main {
  background-color: #e5e4d7;
  border-radius: 5px;
  padding: 10px;
  font-size: 1.1em;
  margin: 10px;
}

.sideright {
  background-color: #e5e4d7;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  font-size: 1.1em;
  min-width: 300px;
}
＆＃13; 
<div class="row">
  <div class="main">

    <h1>This is a brilliant paragraph</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices
      diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis
      non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices
      diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis
      non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>


  </div>
  <div class="sideright">
    <h2>Sumthing</h2>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
  </div>
</div>
<div class="row">
  <div class="main">

    <h1>This is a brilliant paragraph</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices
      diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis
      non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices
      diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis
      non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p>


  </div>
  <div class="sideright">
    <h2>Sumthing</h2>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
    <p>sum</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

*请务必使用flexbox的供应商前缀来支持跨浏览器。

相关问题
最新问题