Web縮小視窗，overflow 左邊圖片無法完整呈現

html css javascript jquery bootstrap

rr8r8r8r8tw 2017-03-23 10:27:06 ‧ 7969 瀏覽

分享至

Demo:
https://jsfiddle.net/shawnhsuicpdas/46843qor/2/

請問在視窗較小狀態時，左右的scrollbar，左邊的圖片會無法完整拖曳到，右邊表格可以，請問是哪邊問題呢?

PS:剛發現用IE看bottom怎麼會往上跑?

窮嘶發發發 iT邦高手 1 級 ‧ 2017-03-23 13:57:26 檢舉

直接改給你，請參考

窮嘶發發發 iT邦高手 1 級 ‧ 2017-03-23 14:31:04 檢舉

個人修改如下，您試試
#HTML
<div id="LoginContainer">
<div id="LoginLeftContainer"><img src="http://lorempixel.com/400/250/" /></div>
<div id="LoginMiddleBar"><img src="http://lorempixel.com/1/311" /></div>
<div id="LoginRightContainer">
<form id="SignupFormPost" method="POST">
<input class="UserNameInput" placeholder="UserName" name="UserName" type="text">
<input class="PassWordInput" placeholder="PassWord" name="PassWord" type="password">
<select class="LanguageSelect" name="lang">
<option value="" disabled="" selected="">Select your language</option>
<option value="en">English</option>
<option value="tw">Traditional Chinese(繁體中文)</option>
<option value="cn">Simplified Chinese(简体中文)</option>
</select>
<button class="loginbtn loginbtn-agree loginbtn-margin">Login</button>
</form>
</div>
</div>
#CSS
#LoginContainer {
display: block;
width: 900px;
height: 300px;
padding:5%;
margin:auto;
clear:both;
}
#LoginLeftContainer,
#LoginMiddleBar,
#LoginRightContainer{
position: absolute;
padding:5%;
}

#LoginLeftContainer {
width:49%;
float: left;
margin:auto;
}

#LoginMiddleBar {
width:1%
float: right;
left: 50%;
}

#LoginRightContainer {
float: right;
width: 49%;
left: 52%;
}

.UserNameInput {
width: 100%;
/* height:40px; */
padding: 5px;
margin-bottom: 10px;
}

.PassWordInput {
width: 100%;
/* height:40px; */
padding: 5px;
margin-bottom: 10px;
}

.LanguageSelect {
width: 100%;
/*height: 43px;*/
padding: 5px;
margin-bottom: 10px;
}

/*loginbtn*/

.loginbtn {
width: 60px;
height: 25px;
color: #151515;
letter-spacing: 1px;
position: absolute;

}

.loginbtn-agree {}

.loginbtn-margin {
margin-top: 8px;
}

個人修改如下，您試試
#HTML
&lt;div id=&quot;LoginContainer&quot;&gt;
    &lt;div id=&quot;LoginLeftContainer&quot;&gt;&lt;img src=&quot;http://lorempixel.com/400/250/&quot; /&gt;&lt;/div&gt;
    &lt;div id=&quot;LoginMiddleBar&quot;&gt;&lt;img src=&quot;http://lorempixel.com/1/311&quot; /&gt;&lt;/div&gt;
    &lt;div id=&quot;LoginRightContainer&quot;&gt;
      &lt;form id=&quot;SignupFormPost&quot; method=&quot;POST&quot;&gt;
        &lt;input class=&quot;UserNameInput&quot; placeholder=&quot;UserName&quot; name=&quot;UserName&quot; type=&quot;text&quot;&gt;
        &lt;input class=&quot;PassWordInput&quot; placeholder=&quot;PassWord&quot; name=&quot;PassWord&quot; type=&quot;password&quot;&gt;
        &lt;select class=&quot;LanguageSelect&quot; name=&quot;lang&quot;&gt;
          &lt;option value=&quot;&quot; disabled=&quot;&quot; selected=&quot;&quot;&gt;Select your language&lt;/option&gt;
          &lt;option value=&quot;en&quot;&gt;English&lt;/option&gt;
          &lt;option value=&quot;tw&quot;&gt;Traditional Chinese(繁體中文)&lt;/option&gt;
          &lt;option value=&quot;cn&quot;&gt;Simplified Chinese(简体中文)&lt;/option&gt;
        &lt;/select&gt;
        &lt;button class=&quot;loginbtn loginbtn-agree loginbtn-margin&quot;&gt;Login&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;
#CSS
#LoginContainer {
  display: block;
  width: 900px;
  height: 300px;
  padding:5%;
  margin:auto;
  clear:both;
}
#LoginLeftContainer,
#LoginMiddleBar,
#LoginRightContainer{
  position: absolute;
  padding:5%;
}
  
#LoginLeftContainer {
 width:49%;
 float: left;
 margin:auto;
}

#LoginMiddleBar {
  width:1%
  float: right;
  left: 50%;
}

#LoginRightContainer {
  float: right;
  width: 49%;
  left: 52%;
}

.UserNameInput {
  width: 100%;
  /* height:40px; */
  padding: 5px;
  margin-bottom: 10px;
}

.PassWordInput {
  width: 100%;
  /* height:40px; */
  padding: 5px;
  margin-bottom: 10px;
}

.LanguageSelect {
  width: 100%;
  /*height: 43px;*/
  padding: 5px;
  margin-bottom: 10px;
}

/*loginbtn*/

.loginbtn {
  width: 60px;
  height: 25px;
  color: #151515;
  letter-spacing: 1px;
  position: absolute;
  
}

.loginbtn-agree {}

.loginbtn-margin {
  margin-top: 8px;
}

修改