Question

在我的页面上设置旁边元素的样式。当我使用height: 100%;时，它会立即泄漏到div中。 See example here

但是当我使用

时

top: 0;
bottom: 0;

它在导航栏下面。 See example here

任何人都可以解释原因吗？我更像是一个Rails人而不是CSS。

HTML：

<div class="properties-results">
<div class="container">
  <div class="row" id="pr-row">

  <div id='map'></div>
<aside>
<h1>Recent Sales Near <%= params[:search] %></h1>
<ul>
  <% @comps.each do |comparable|%>
  <li><%= comparable.street %></li>
  <i> <%= comparable.sold_price%></i>
  <% end %>
</ul>
</aside>

</div>
</div>
</div>

<div id="individual-properties">
  <div class="container">
    <div class="row">
      <% @comps.each do |comparables| %>
      <div class="col-sm-4 col-xs-12">
        <div class="list-group">
          <h3 class="list-group-text"><%= comparables.street %></h3>
          <p class="list-group-text"><%= comparables.square_feet %> square feet</p>
          <p class="list-group-text">List Price: <%= comparables.list_price %></p>
          <p class="list-group-text">Sold Price: <%= comparables.sold_price %></p>

        </div>
      </div>
      <% end %>
    </div>
  </div>
</div>

CSS：

.properties-results {
    margin-top: 50px;
    height: 401px;

}

#pr-row {
    padding: 0;
    margin-top: 0;
}

aside{
    width: 400px;
    position: absolute;
    z-index: 1000;
    top: 0;
    bottom: 0;
    min-width: 195px;
    background-color: #000;
        ul {
            list-style-type: none;
        }
}

  #map {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        min-width: 260px;

    }

#individual-properties {
    margin-top: 20px;
}

.list-group {
    border-top: 1px solid #006699;

}

.list-group-text {
    text-align: left;
}

Answer 1

我会将position:relative;添加到您的.properties-results样式，以便将aside锚定起来

另外，请确保您的<ul>仅有<li>个孩子，请参阅SO post

除了元素溢出之外/之下

1 个答案: