即使内容很小,div也会向左移动

时间:2019-04-10 11:21:37

标签: flexbox bootstrap-4

很抱歉,标题...我不知道该如何表达。无论如何,我有一个简单的flex box页面,内容很少。问题出在平板电脑上,如果我触摸移动屏幕,内容就会移动。它没有显示水平滚动,也没有空白。由于没有多余的内容可以水平显示,所以我根本不希望它水平移动。

屏幕如下:

enter image description here 加载页面已完全显示

enter image description here 内容很小,我可以移动div并将其隐藏到左侧,然后再拉回去。

我希望元素不会移动,因为没有内容可移动。

我的显示从this开始,但没有页眉/页脚。为方便起见:

CSS:

*, *:before, *:after
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body
{
    width: 100%;
    height: 100%;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body
{
    background: #444444;

    color: #cccccc;
    font-size: 14px;
    /* Helvetica/Arial-based sans serif stack */
    font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.flexbox-parent
{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */

    background: rgba(255, 255, 255, .1);
}

.flexbox-item
{
    padding: 0px;
}
.flexbox-item-grow
{
    flex: 1; /* same as flex: 1 1 auto; */
}


.flexbox-item.content
{
    background: rgba(0, 0, 255, .1);
}

.fill-area
{
    display: flex;
    flex-direction: row;

    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */

}
.fill-area-content
{
    background: rgba(0, 0, 0, .3);
    border: 1px solid #000000;

    /* Needed for when the area gets squished too far and there is content that can't be displayed */
    overflow: auto; 
}

HTML:

<div class="flexbox-parent">

  <div class="flexbox-item fill-area content flexbox-item-grow">
      <div class="fill-area-content flexbox-item-grow">
          Content 
          <br /><br />
          Emulates height 100% with a horizontal flexbox with stretch
          <br /><br />      
          Content continues
      </div>
  </div>

</div>

0 个答案:

没有答案