除了高度应该100%覆盖整个侧面

时间:2015-10-28 11:16:10

标签: css height sidebar

查看我的以下示例。

//由于已删除内容而被删除

private static Preference.OnPreferenceChangeListener sBindPreferenceSummaryToValueListener = new Preference.OnPreferenceChangeListener() {
    @Override
    public boolean onPreferenceChange(Preference preference, Object value) {
        String stringValue = value.toString();

        if (preference.getKey().equals("notification_period")){
            String notificationPeriodSummary = preference.getContext().getResources().getString(R.string.notification_period_summary);
            preference.setSummary(stringValue + notificationPeriodSummary));
        } 
        return true;
    }
};

到目前为止,我还没有找到正确的解决方案。我正朝着正确的方向前进。问题是,在上面的“示例#1”中,即使“main”部分中只有几行代码,右侧也会有一个滚动条。我只想在有更多代码行时显示滚动条,例如“Example#2”。

4 个答案:

答案 0 :(得分:5)

每当您为任何元素赋予100%高度时,您还应将body和html文档高度设置为100%。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值计算为“auto”。

* {
  margin: 0;
  padding: 0;
  overflow: auto;
}
html,
body {
  height: 100%;
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
  display: block
}
body {
  font-size: 1em;
  color: #fcfcfc;
  background-color: #f8f4eb;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
 *  HTML5 Sections
 */

.header {
  height: 72px;
  margin: 0;
  padding: 0;
  background-color: #fff;
  overflow: hidden;
}
.nav {
  position: relative;
  height: 52px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.main {
  position: relative;
  height: 100%;
  background-color: #f8f4eb;
  overflow: hidden;
}
.aside {
  
  float: left;
  width: 195px;
 
  background-color: #ebddca;
  height: 100%;
}
<aside class="aside" id="asidecontainer">

  <div class="asidewrapper">

    <font color="#000">The background of this aside bar should be totally to the bottom of the page.</font>

  </div>
</aside>
<div id="asidehider" class="asideborder"></div>

<main class="main" id="main">

  <font color="#000">
        
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
    
    </font>

</main>

答案 1 :(得分:2)

使用此课程。

.aside {
  position: relative;
  float: left;
  width: 195px;
  top: 0px;
  bottom: 0px;
  background-color: #ebddca;
  height: 100vh;
}

关键是使用100vh代替100%

答案 2 :(得分:2)

您的<aside><main>必须有一个父元素,该元素显示为flex并具有对齐的项目。你还必须清理css中的主要类和主类。 jsfiddle file

答案 3 :(得分:1)

仅向bodyhtml添加身高:100px。

<强>问题
您将height:100%;提供给aside,该html, body { height:100%; } 试图从父母那里找不到身高。{/ p>

try {
            HttpClient client = new DefaultHttpClient();
            HttpGet request = new HttpGet(
                    "http://bla/bla/bla");
            HttpResponse response = client.execute(request);
            BufferedReader rd = new BufferedReader(new InputStreamReader(
                    response.getEntity().getContent()));
            String line = "";
            while ((line = rd.readLine()) != null) {
                System.out.println(line);
            }
        } catch (Exception e) {

            System.out.println(e.getMessage());
        }

Jsfiddle