将div高度设置为等于另一个div

时间:2018-04-21 22:25:56

标签: html css

我创建了一个网站,我无法弄清楚如何设置两个div,左右浮动到与中心div相同的高度。

这是我的代码:



body {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  background-color: #3CA7DC;
}

#container {
  width: 80%;
  /* 800px */
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 11px;
}

#header {
  height: 190px;
  width: 100%;
  /* 155px */
  background-color: #1519AA;
}

#menu {
  height: 60px;
  /* 60px */
  background-color: #666;
}

#main {
  width: 98%;
  margin-left: 1%;
  margin-top: -16px;
  height: auto;
  background-color: #5F5F5F;
}

#sidebarLeft {
  width: 1%;
  height: 78.4%;
  /* Manually Change */
  background-color: #1519AA;
  float: left;
}

#sidebarRight {
  width: 1%;
  height: 78.4%;
  /* Manually Change */
  background-color: #1519AA;
  float: right;
}

#footer {
  height: 10%;
  background: #CCC;
  margin-top: -16px;
}


/* Text */

h1 {
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 45px;
}

h2 {
  color: white;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  margin-left: 10px;
}

p {
  color: white;
  font-family: "Times New Roman", Times, serif;
  text-indent: 50px;
  /* MAKE PERCENT */
  text-align: justify;
  margin-left: 20px;
  margin-right: 10px;
}

<div id="container">
  <div id="header">
    <h1>Project Name</h1>
    <br><br><br>
    <h2>Home</h2>
  </div>
  <div id="menu">
    <ul class="lavaLamp" id="1">
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
      <li><a href="#">Page 4</a></li>
      <li><a href="#">Page 5</a></li>
    </ul>
  </div>
  <div id="sidebarLeft">

  </div>
  <div id="sidebarRight">

  </div>
  <div id="main">
    <p>Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto. </p>
    <p>Confidam sit contumax meo res timerent utrimque parentes. Spectentur notionibus ego imaginandi imaginarer tantummodo hoc sum. Liceat rum juncta notior platea res. Ii bile nolo eram vidi scio to id. Negavi sensum agi falsis sed ignota sua vix. At ei
      idcirco co at motarum figuras divinae reddere. Obnoxius im animalia ferventi ad de callidum. </p>
    <p>Est rei aeque dum istae res cogit. Debeo eo ex si nonne fidam se ullos talia color. Quavis cap obvium genera nullam hac. Apparet hae insuper sim naturas ostendi per poterit. Utile aliud ii modus vocem an tactu. Punctum co ac ultimum immensi ponitur
      sensuum im. Ope quin haec quam unam rum sibi quid. Re nova dare mens bere in vi addo. Actuali at credidi existam ex admitto ex. Vixque gloria operis has sub nia lumini agi. </p>
    <p>Ipsammet incertas diversis ut fatendum gi noluisse. Actu quum opus me sane addo quin ex. Situs mei vis mem adhuc ipsis. Vox remanetne occurrunt ope cap tam detractis sentiendi perfectum.</p>
    <p>Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto. </p>
    <p>Confidam sit contumax meo res timerent utrimque parentes. Spectentur notionibus ego imaginandi imaginarer tantummodo hoc sum. Liceat rum juncta notior platea res. Ii bile nolo eram vidi scio to id. Negavi sensum agi falsis sed ignota sua vix. At ei
      idcirco co at motarum figuras divinae reddere. Obnoxius im animalia ferventi ad de callidum. </p>
    <p>Est rei aeque dum istae res cogit. Debeo eo ex si nonne fidam se ullos talia color. Quavis cap obvium genera nullam hac. Apparet hae insuper sim naturas ostendi per poterit. Utile aliud ii modus vocem an tactu. Punctum co ac ultimum immensi ponitur
      sensuum im. Ope quin haec quam unam rum sibi quid. Re nova dare mens bere in vi addo. Actuali at credidi existam ex admitto ex. Vixque gloria operis has sub nia lumini agi. </p>
    <p>Ipsammet incertas diversis ut fatendum gi noluisse. Actu quum opus me sane addo quin ex. Situs mei vis mem adhuc ipsis. Vox remanetne occurrunt ope cap tam detractis sentiendi perfectum.</p>
    <p>Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto. </p>
    <p>Confidam sit contumax meo res timerent utrimque parentes. Spectentur notionibus ego imaginandi imaginarer tantummodo hoc sum. Liceat rum juncta notior platea res. Ii bile nolo eram vidi scio to id. Negavi sensum agi falsis sed ignota sua vix. At ei
      idcirco co at motarum figuras divinae reddere. Obnoxius im animalia ferventi ad de callidum. </p>
    <p>Est rei aeque dum istae res cogit. Debeo eo ex si nonne fidam se ullos talia color. Quavis cap obvium genera nullam hac. Apparet hae insuper sim naturas ostendi per poterit. Utile aliud ii modus vocem an tactu. Punctum co ac ultimum immensi ponitur
      sensuum im. Ope quin haec quam unam rum sibi quid. Re nova dare mens bere in vi addo. Actuali at credidi existam ex admitto ex. Vixque gloria operis has sub nia lumini agi. </p>
    <p>Ipsammet incertas diversis ut fatendum gi noluisse. Actu quum opus me sane addo quin ex. Situs mei vis mem adhuc ipsis. Vox remanetne occurrunt ope cap tam detractis sentiendi perfectum.</p>
    <p>Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto. </p>
    <p>Confidam sit contumax meo res timerent utrimque parentes. Spectentur notionibus ego imaginandi imaginarer tantummodo hoc sum. Liceat rum juncta notior platea res. Ii bile nolo eram vidi scio to id. Negavi sensum agi falsis sed ignota sua vix. At ei
      idcirco co at motarum figuras divinae reddere. Obnoxius im animalia ferventi ad de callidum. </p>
    <p>Est rei aeque dum istae res cogit. Debeo eo ex si nonne fidam se ullos talia color. Quavis cap obvium genera nullam hac. Apparet hae insuper sim naturas ostendi per poterit. Utile aliud ii modus vocem an tactu. Punctum co ac ultimum immensi ponitur
      sensuum im. Ope quin haec quam unam rum sibi quid. Re nova dare mens bere in vi addo. Actuali at credidi existam ex admitto ex. Vixque gloria operis has sub nia lumini agi. </p>
    <p>Ipsammet incertas diversis ut fatendum gi noluisse. Actu quum opus me sane addo quin ex. Situs mei vis mem adhuc ipsis. Vox remanetne occurrunt ope cap tam detractis sentiendi perfectum.</p>
  </div>
  <div id="footer">

  </div>
</div>
<br><br><br>
&#13;
&#13;
&#13;

https://imgur.com/a/5aUOaPF

每当我增加主div中的内容量时,主div调整,但我无法弄清楚如何使蓝色左右侧边栏与主div一起调整。我必须手动更改它,即使我这样做,它在每个屏幕上也会有所不同。

任何人都可以帮我弄清楚如何使蓝色侧边栏的长度与主要的div相同吗?

1 个答案:

答案 0 :(得分:0)

为什么你不能简单地使用边框来创建这两个侧边栏:

&#13;
&#13;
body {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  background-color: #3CA7DC;
}

#container {
  width: 80%;
  /* 800px */
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 11px;
}

#header {
  height: 190px;
  width: 100%;
  /* 155px */
  background-color: #1519AA;
}

#menu {
  height: 60px;
  /* 60px */
  background-color: #666;
}

#main {
  box-sizing:border-box;
  border-right:10px solid #1519AA;
  border-left:10px solid #1519AA;
  background-color: #5F5F5F;
}


#footer {
  height: 10%;
  background: #CCC;
  margin-top: -16px;
}


/* Text */

h1 {
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 45px;
}

h2 {
  color: white;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  margin-left: 10px;
}

p {
  color: white;
  font-family: "Times New Roman", Times, serif;
  text-indent: 50px;
  /* MAKE PERCENT */
  text-align: justify;
  margin-left: 20px;
  margin-right: 10px;
}
&#13;
<div id="container">
  <div id="header">
    <h1>Project Name</h1>
    <br><br><br>
    <h2>Home</h2>
  </div>

  <div id="main">
    <p>Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto. </p>
    <p>Confidam sit contumax meo res timerent utrimque parentes. Spectentur notionibus ego imaginandi imaginarer tantummodo hoc sum. Liceat rum juncta notior platea res. Ii bile nolo eram vidi scio to id. Negavi sensum agi falsis sed ignota sua vix. At ei
      idcirco co at motarum figuras divinae reddere. Obnoxius im animalia ferventi ad de callidum. </p>
    <p>Est rei aeque dum istae res cogit. Debeo eo ex si nonne fidam se ullos talia color. Quavis cap obvium genera nullam hac. Apparet hae insuper sim naturas ostendi per poterit. Utile aliud ii modus vocem an tactu. Punctum co ac ultimum immensi ponitur
      sensuum im. Ope quin haec quam unam rum sibi quid. Re nova dare mens bere in vi addo. Actuali at credidi existam ex admitto ex. Vixque gloria operis has sub nia lumini agi. </p>
    <p>Ipsammet incertas diversis ut fatendum gi noluisse. Actu quum opus me sane addo quin ex. Situs mei vis mem adhuc ipsis. Vox remanetne occurrunt ope cap tam detractis sentiendi perfectum.</p>
    <p>Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto. </p>
    <p>Confidam sit contumax meo res timerent utrimque parentes. Spectentur notionibus ego imaginandi imaginarer tantummodo hoc sum. Liceat rum juncta notior platea res. Ii bile nolo eram vidi scio to id. Negavi sensum agi falsis sed ignota sua vix. At ei
      idcirco co at motarum figuras divinae reddere. Obnoxius im animalia ferventi ad de callidum. </p>
    <p>Est rei aeque dum istae res cogit. Debeo eo ex si nonne fidam se ullos talia color. Quavis cap obvium genera nullam hac. Apparet hae insuper sim naturas ostendi per poterit. Utile aliud ii modus vocem an tactu. Punctum co ac ultimum immensi ponitur
      sensuum im. Ope quin haec quam unam rum sibi quid. Re nova dare mens bere in vi addo. Actuali at credidi existam ex admitto ex. Vixque gloria operis has sub nia lumini agi. </p>
    <p>Ipsammet incertas diversis ut fatendum gi noluisse. Actu quum opus me sane addo quin ex. Situs mei vis mem adhuc ipsis. Vox remanetne occurrunt ope cap tam detractis sentiendi perfectum.</p>
    <p>Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto. </p>
    <p>Confidam sit contumax meo res timerent utrimque parentes. Spectentur notionibus ego imaginandi imaginarer tantummodo hoc sum. Liceat rum juncta notior platea res. Ii bile nolo eram vidi scio to id. Negavi sensum agi falsis sed ignota sua vix. At ei
      idcirco co at motarum figuras divinae reddere. Obnoxius im animalia ferventi ad de callidum. </p>
    <p>Est rei aeque dum istae res cogit. Debeo eo ex si nonne fidam se ullos talia color. Quavis cap obvium genera nullam hac. Apparet hae insuper sim naturas ostendi per poterit. Utile aliud ii modus vocem an tactu. Punctum co ac ultimum immensi ponitur
      sensuum im. Ope quin haec quam unam rum sibi quid. Re nova dare mens bere in vi addo. Actuali at credidi existam ex admitto ex. Vixque gloria operis has sub nia lumini agi. </p>
    <p>Ipsammet incertas diversis ut fatendum gi noluisse. Actu quum opus me sane addo quin ex. Situs mei vis mem adhuc ipsis. Vox remanetne occurrunt ope cap tam detractis sentiendi perfectum.</p>
    <p>Viam sumi mo id erit. Objectioni mo de necessario crediderim. Imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo. Extat neque arcte re ad etiam. Ego infiniti reperero mutuatur formalem sed scribere nec vel profecto. </p>
    <p>Confidam sit contumax meo res timerent utrimque parentes. Spectentur notionibus ego imaginandi imaginarer tantummodo hoc sum. Liceat rum juncta notior platea res. Ii bile nolo eram vidi scio to id. Negavi sensum agi falsis sed ignota sua vix. At ei
      idcirco co at motarum figuras divinae reddere. Obnoxius im animalia ferventi ad de callidum. </p>
    <p>Est rei aeque dum istae res cogit. Debeo eo ex si nonne fidam se ullos talia color. Quavis cap obvium genera nullam hac. Apparet hae insuper sim naturas ostendi per poterit. Utile aliud ii modus vocem an tactu. Punctum co ac ultimum immensi ponitur
      sensuum im. Ope quin haec quam unam rum sibi quid. Re nova dare mens bere in vi addo. Actuali at credidi existam ex admitto ex. Vixque gloria operis has sub nia lumini agi. </p>
    <p>Ipsammet incertas diversis ut fatendum gi noluisse. Actu quum opus me sane addo quin ex. Situs mei vis mem adhuc ipsis. Vox remanetne occurrunt ope cap tam detractis sentiendi perfectum.</p>
  </div>
  <div id="footer">

  </div>
</div>
<br><br><br>
&#13;
&#13;
&#13;