Question

我对css中的div标签和overflow属性有疑问。

在我的代码中，当顶部div标签之一（在页面左侧）禁用溢出时，底部div标签会改变位置。但是当top div标签启用页面时没有任何问题。

请帮帮我。感谢。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />

    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="CSS/BaseStyles.css" rel="stylesheet" />
    <link href="CSS/MediaQuery.css" rel="stylesheet" />

  </head>
  <body>
    <div class="Header"> </div>
    <div class="Content">
      <div class="LoginForm">
        <div>
          <div class="UniLogo">
            <img src="Uni-LOGO.png" />
          </div>
          <div class="SystemName"></div>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" id="iStudentCode" placeholder="نام کاربری">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" id="iPassword" placeholder="کلمه عبور">
        </div>
        <div class="form-group">
          <input type="text" class="form-control" id="iPassword" placeholder="متن تصویر">
        </div>
        <div>
          <img src="botdetect3-captcha-sunandwarmair.jpg" />
        </div>
        <br />
        <button type="button" class="btn btn-primary btn-block" id="btnLogin"></button>
        <br />

        <button type="button" class="btn btn-link">کلمه عبور را فراموش کرده ام</button>
      </div>
      <div class="Bulltin">
        <div class="BulltinTitle">
          <span>تابلوی اعلانات اساتید</span>
        </div>
        <div class="Messages">
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
        </div>
      </div>
      <div class="Bulltin">
        <div class="BulltinTitle">
          <span>تابلوی اعلانات آموزش</span>
        </div>
        <div class="Messages">
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>

        </div>
      </div>
      <div class="Bulltin">
        <div class="BulltinTitle">
          <span>تابلوی اعلانات مالی</span>
        </div>
        <div class="Messages">
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
        </div>
      </div>
      <div class="Bulltin">
        <div class="BulltinTitle">
          <span>تابلوی آیین نامه های آموزشی</span>
        </div>
        <div class="Messages">
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
          <div class="Message">
            <div class="Time">منتشر شده در تاریخ 95/5/5</div>
            <div class="Title">این مکان عنوان پیغام است</div>
            <div>قابل توجه دانشجویان مهندسی نرم افزار این فایل جهت تست می باشد.</div>
          </div>
        </div>
      </div>

    </div>
    <div style="clear:both;"></div>
    <div class="Footer">تمامی حقوق این سامانه متعلق به دانشگاه  مازندران می باشد.</div>

  </body>
</html>

CSS：

* {
  padding: 0;
  margin: 0;
  direction: rtl;
}

@font-face {
  font-family: 'DroidNaskh-Regular';
  src: url('../fonts/DroidNaskh-Regular.ttf') format('truetype');
}

html {
  bottom: 0px;
}

body {
  width: 100%;
  min-height: 100%;
  font-family: 'DroidNaskh-Regular';
}

.Content {
  width: 90%;
  margin: 6% auto;
}

.LoginForm {
  width: 33%;
  float: right;
  margin-right: 0.333333%;
  margin-bottom: 10px;
  padding: 0px 50px;
  min-height: 200px;
}

.Bulltin {
  width: 29%;
  float: right;
  margin-right: 4.333333%;
  margin-bottom: 30px;
  min-height: 100px;
  overflow:hidden;

  /*display:block;*/
}

.UniLogo {
  width: 30%;
  padding-bottom: 10%;
  float: right;
}

.UniLogo img {
  width: 100%;
}

.SystemName {
  width: 65%;
  float: left;
  margin-top: 15%;
  text-align: center;
}

.BulltinTitle {
  border-bottom: solid 1px;
}

.BulltinTitle span {
  display: inline-block;
  border-bottom: solid 2px #1a18d3;
  margin: 0;
}
.Messages {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 200px;
  position:relative;
}

.Message {
  padding: 5px 0px;
  position:relative;

}

.Message .Time {
  font-size: 11px;
  color: #808080;
}

.Message .Title {
  font-size: 13px;
  font-weight: bold;
  color: #1a4ced;
}

.Header {
  font-size: 11px;
  color: #6b6a6a;
  text-align: center;
  padding: 10px;
}

.Footer {
  width: 100%;
  height: 50px;
  background-color: #808080;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

当我使用溢出时：滚动将破坏css

0 个答案: