Question

我试图制作这样的页面img。目前我在这个侧边栏上工作，因为我需要使用HTML5，我认为旁边元素是一个不错的选择。但我无法像在图片中那样定位它。一边是好的选择还是以其他方式解决这个问题？这是我的HTML

<section id = "overview"></section>
<aside>
    <h1>Serverstatus:</h1>
    <div id ="benutzerContainer">
        <h2 class = "firstLine">Benutzer</h2>
        <p class = "firstLine">Administrator</p>
    </div>
    <div id = "zeitContainer">
        <h2 class = "secondLine">Systemstartzeit</h2>
        <p class = "secondLine">10:00</p>
    </div>
    <div id = "datumContainer">
        <h2 class = "thirdLine">Systemstartdatum</h2>
        <p class = "thirdLine">06.03.2017</p>
    </div>
    <div id ="loginContainer">
        <h2 class ="fourthLine">Fehlgeschlagene <br />
        Logins</h2>         
        <p class ="fourthLine">3</p>
    </div>
    <aside>

和css

section#overview{
width: 100%
background: linear-gradient(to bottom, rgba(206,206,206,0.3),      rgba(206,206,206,1)); 

}
aside {
float: right;
width: 25%;
background: linear-gradient(to bottom, rgba(206,206,206,0.3), rgba(206,206,206,1));
}

我向右漂浮时无法将高度设为100％。一旦我放置位置：绝对它一直向左，甚至浮动设置为向右。

Answer 1

我对你想要的东西感到有点困惑，但这就是你想要的吗？

body {
  background: linear-gradient(to bottom, rgba(206, 206, 206, 0.3), rgba(206, 206, 206, 1));
}

* {  box-sizing: border-box;  }

section#overview {
  width: 75%;
  height: 100%;
  border-right: 1px #ccc solid; /* Switch if overview if taller */
  float: left;
}

aside {
  float: right;
  width: 25%;
  height: 100%;
  border-left: 1px #ccc solid;
}

<section id="overview">
  afwef foawjp foij oaijfw eoijfpa ojifojiaepo ijfapo jifpeo jiafwo f oijapojiefoajfweojifapofjiep ojioi jofiajpoj foajwejiawj ofji ofjawoj pofja oifjaeo jfaoji ojfaowj ofij ojfoawij pofijaw pofijawepoj 
</section>
<aside>
  <h1>Serverstatus:</h1>
  <div id="benutzerContainer">
    <h2 class="firstLine">Benutzer</h2>
    <p class="firstLine">Administrator</p>
  </div>
  <div id="zeitContainer">
    <h2 class="secondLine">Systemstartzeit</h2>
    <p class="secondLine">10:00</p>
  </div>
  <div id="datumContainer">
    <h2 class="thirdLine">Systemstartdatum</h2>
    <p class="thirdLine">06.03.2017</p>
  </div>
  <div id="loginContainer">
    <h2 class="fourthLine">Fehlgeschlagene <br />
        Logins</h2>
    <p class="fourthLine">3</p>
  </div>
  <aside>

Answer 2

我将IsomiR hsa-miR-200b-3p_AATACTGCCTGGTAATGATGACA 0 I-C t C grep("^(?:[^ ]+ ){3}I-C",topIsomiRSignAveExpr$IsomiR)添加到height: 100%;元素，它使元素高度跨越父元素的整个高度。尝试在两个元素周围添加包装器以包含它们。请尝试下面的代码。

这里是fiddle。

<强> HTML

aside

<强> CSS

<div class="wrap">

    <section id="overview"></section>

    <aside>

        <h1>Serverstatus:</h1>

        <div id ="benutzerContainer">
            <h2 class="firstLine">Benutzer</h2>
            <p class="firstLine">Administrator</p>
        </div>
        <div id="zeitContainer">
            <h2 class="secondLine">Systemstartzeit</h2>
            <p class="secondLine">10:00</p>
        </div>
        <div id="datumContainer">
            <h2 class="thirdLine">Systemstartdatum</h2>
            <p class="thirdLine">06.03.2017</p>
        </div>
        <div id="loginContainer">
            <h2 class ="fourthLine">Fehlgeschlagene <br />Logins</h2>
            <p class="fourthLine">3</p>
        </div>

     </aside>

</div>

使用哪个浮动右侧并仅使用css覆盖整个页面？

2 个答案: