防止弹性物品溢出容器

时间：2017-06-27 17:54:03

标签： html css css3 responsive-design flexbox

我正在尝试创建一个包含多个项目的响应式首页网站。

这就是我想要的（黑色正方形是屏幕）：

Normal screen

Reduced size

One line screen

这就是我所拥有的（它代表了我想做的事情）：

＆＃13;
＆＃13; 
#main {
  background-color: purple;
  overflow: hidden;
  top: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

.container {
  margin-top: 10px;
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: center;
  height: 100%;
  align-items: flex-start;
  overflow: scroll;
}

.item1 {
  background-color: red;
  margin-right: 20px;
  width: 100px;
  height: 100px;
}

.item2 {
  background-color: blue;
  width: 100px;
  height: auto;
  margin-right: 20px;
  color: white;
}

.item3 {
  background-color: green;
  min-width: 100px;
  max-width: 200px;
  height: 100%;
  margin-bottom: 20px;
  overflow: hidden;
}

.content {
  min-height: 400px;
  overflow: scroll;
}
＆＃13; 
<div id="main">
  <h2>Hey</h2>
  <div class="container">
    <div class="item1"></div>
    <div class="item2">Item item item item item item item item</div>
    <div class="item3">
      <div class="content">
        <p>This is a paragraph1.</p>
        <p>This is a paragraph2.</p>
        <p>This is a paragraph3.</p>
        <p>This is a paragraph4.</p>
        <p>This is a paragraph5.</p>
        <p>This is a paragraph6.</p>
        <p>This is a paragraph7.</p>
        <p>This is a paragraph8.</p>
        <p>This is a paragraph9.</p>
        <p>This is a paragraph10.</p>
        <p>This is a paragraph11.</p>
        <p>This is a paragraph12.</p>
        <p>This is a paragraph13.</p>
        <p>This is a paragraph14.</p>
        <p>This is a paragraph15.</p>
        <p>This is a paragraph16.</p>
        <p>This is a paragraph17.</p>
        <p>This is a paragraph18.</p>
        <p>This is a paragraph19.</p>
        <p>This is a paragraph20.</p>
        <p>This is a paragraph21.</p>
        <p>This is a paragraph22.</p>
        <p>This is a paragraph23.</p>
        <p>This is a paragraph24.</p>
        <p>This is a paragraph25.</p>
        <p>This is a paragraph26.</p>
        <p>This is a paragraph27.</p>
        <p>This is a paragraph28.</p>
        <p>This is a paragraph29.</p>
        <p>This is a paragraph30.</p>
        <p>This is a paragraph31.</p>
        <p>This is a paragraph32.</p>
        <p>This is a paragraph33.</p>
        <p>This is a paragraph34.</p>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

http://jsfiddle.net/PeAAb/540/

1 个答案:

答案 0 :(得分：2)

主要问题是您的第三个（绿色）项目设置为Private Sub EditSO_Btn_Click() With Me.ExistingSO_LB For i = 0 To .ListCount - 1 If .Selected(i) Then EditSONumer = .List(i) Exit For End If Next i End With If EditSONumer = 0 Then MsgBox "No SO was selected from the list", vbInformation Exit Sub End If Unload Me AddEdit_Orders_Form.Show ' call sub Edit Order (load Add Order with the SO# data requested) End Sub '========================================================= Private Sub ExistingPO_LB_Click() ' ****** This is the Sub I guess I'm missing something ****** Dim i As Long Dim POSelected As Variant Dim SOArr As Variant With Me.ExistingPO_LB For i = 0 To .ListCount - 1 If .Selected(i) Then POSelected = .List(i) Exit For End If Next i End With ' update the SO listbox with only relevant SO (from the selected PO) SOArr = Split(PODict(POSelected), ",") '<=== PODict(POSelected) return empty ??? With Me.ExistingSO_LB .Clear ' clear the previous items For i = LBound(SOArr) To UBound(SOArr) .AddItem SOArr(i) Next i End With End Sub '========================================================= Private Sub UserForm_Initialize() ' load all existing PO's from "Orders DB" sheet Dim Key As Variant ' populate listbox with PO's With Me.ExistingPO_LB For Each Key In PODict.keys .AddItem Key Next Key End With End Sub 。这意味着它将占据容器的整个高度。

除了你也设置了保证金。

height: 100%

你也有.item3 { background-color: green; min-width: 100px; max-width: 200px; height: 100%; margin-bottom: 20px; overflow: hidden; } 占据身高。

因此，h2 + height: 100% + margin-bottom: 20px大于100％并导致溢出。

请改为尝试：

h2

这将解决主要问题。

然后，要使滚动条正常工作，请调整.item3 { background-color: green; min-width: 100px; max-width: 200px; height: calc(100% - 40px); margin-bottom: 20px; overflow: hidden; } 规则并将overflow添加到display: flex。这将触发子元素的完整高度，足以呈现滚动条。

.item3
#main {
  background-color: purple;
  overflow: hidden;
  top: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

.container {
  margin-top: 10px;
  float: left;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height: 100%;
  align-items: flex-start;
  /* overflow: scroll; */
}

.item1 {
  background-color: red;
  margin-right: 20px;
  width: 100px;
  height: 100px;
}

.item2 {
  background-color: blue;
  width: 100px;
  height: auto;
  margin-right: 20px;
  color: white;
}

.item3 {
  background-color: green;
  min-width: 100px;
  max-width: 200px;
  height: calc(100% - 40px);
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
}

.content {
  min-height: 0;
  overflow-y: scroll;
}

h2 { height: 20px; margin: 0; }

然后，要调整较小屏幕的绿色项目，请考虑媒体查询。像这样：

<div id="main">
  <h2>Hey</h2>
  <div class="container">
    <div class="item1"></div>
    <div class="item2">Item item item item item item item item</div>
    <div class="item3">
      <div class="content">
        <p>This is a paragraph1.</p>
        <p>This is a paragraph2.</p>
        <p>This is a paragraph3.</p>
        <p>This is a paragraph4.</p>
        <p>This is a paragraph5.</p>
        <p>This is a paragraph6.</p>
        <p>This is a paragraph7.</p>
        <p>This is a paragraph8.</p>
        <p>This is a paragraph9.</p>
        <p>This is a paragraph10.</p>
        <p>This is a paragraph11.</p>
        <p>This is a paragraph12.</p>
        <p>This is a paragraph13.</p>
        <p>This is a paragraph14.</p>
        <p>This is a paragraph15.</p>
        <p>This is a paragraph16.</p>
        <p>This is a paragraph17.</p>
        <p>This is a paragraph18.</p>
        <p>This is a paragraph19.</p>
        <p>This is a paragraph20.</p>
        <p>This is a paragraph21.</p>
        <p>This is a paragraph22.</p>
        <p>This is a paragraph23.</p>
        <p>This is a paragraph24.</p>
        <p>This is a paragraph25.</p>
        <p>This is a paragraph26.</p>
        <p>This is a paragraph27.</p>
        <p>This is a paragraph28.</p>
        <p>This is a paragraph29.</p>
        <p>This is a paragraph30.</p>
        <p>This is a paragraph31.</p>
        <p>This is a paragraph32.</p>
        <p>This is a paragraph33.</p>
        <p>This is a paragraph34.</p>
      </div>
    </div>
  </div>
</div>

jsFiddle

相关问题
最新问题