HTML防止在窗口大小調整時移動對象（div）

Question

信息：使用Chrome版本29.0.1547.62 m和IE 7.0.6002.18005

我試過搜索SO和谷歌，但從來沒有真正找到一個有效的答案，不管它是不是被我正確應用（試過這個和這個），還是沒有完全回答我問的同樣的問題......

我正在網絡內部使用一個非常簡單的網站。 我唯一的問題是當我將窗口大小調整到iFrame #calcframe {min-width:510px} + div #panel {width:186px}的calcframe以下時， calcframe會移動到面板下方。

這是相關代碼：

    <!DOCTYPE HTML>
    <HTML>
      <HEAD>
        <STYLE>
          body {font-family:'Arial'; font-size:90%}
          html, body {height:100%; margin:0; padding:0}
          #panel {background:black; color:white; width:186px; height: calc(100% - 75px); float:left}
          #content {height: calc(100% - 75px)}
          #spacer {background:black; font-size:400%; color:white ; height:75px}
          #calcFrame {height: calc(100% - 3px); width: calc(100% - 186px); min-width:510px; margin:0; padding:0}
        </STYLE>
        <SCRIPT LANGUAGE="JavaScript">
          function OpenHTML(cC) {
            document.getElementById("cF").src=cC + ".html"
            }
        </SCRIPT>
      </HEAD>
      <BODY>
        <div id='spacer'>
          SC
        </div>
        <div id='panel'>
          <input type='radio' name='CalcType' id='L' onClick="OpenHTML(this.id)">L<br>
          <input type='radio' name='CalcType' id='U' onClick="OpenHTML(this.id)">U<br>
          <input type='radio' name='CalcType' id='D' onClick="OpenHTML(this.id)">D<br>
          <input type='radio' name='CalcType' id='P' onClick="OpenHTML(this.id)">P<br>
        </div>
        <div id='content'>
          <iframe id='cF' frameborder="0")></iframe>
        </div>
      </BODY>
    </HTML>

請溫柔:)，我是自學成才的。

Answer 1

嘗試將您不希望調整大小的項目包裝到div中，將其稱為“包裝器”。 然后在“wrapper”上設置min-width，讓我們說510px。 不應更改此div容器內的任何內容。 另外，嘗試將html標記保持為小寫。 :)

<!DOCTYPE HTML>
<html>
    <head>
        <style>
          body {font-family:'Arial'; font-size:90%}
          html, body {height:100%; margin:0; padding:0}
          #panel {background:black; color:white; width:186px; height: calc(100% - 75px); float:left}
          #content {height: calc(100% - 75px)}
          #spacer {background:black; font-size:400%; color:white ; height:75px}
          #calcFrame {height: calc(100% - 3px); width: calc(100% - 186px); margin:0; padding:0}
          #wrapper {min-width: 510px;}
        </style>
        <script LANGUAGE="JavaScript">
          function OpenHTML(cC) {
            document.getElementById("cF").src=cC + ".html"
            }
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id='spacer'>
                SC
            </div>
            <div id='panel'>
                <input type='radio' name='CalcType' id='L' onClick="OpenHTML(this.id)">L<br>
                <input type='radio' name='CalcType' id='U' onClick="OpenHTML(this.id)">U<br>
                <input type='radio' name='CalcType' id='D' onClick="OpenHTML(this.id)">D<br>
                <input type='radio' name='CalcType' id='P' onClick="OpenHTML(this.id)">P<br>
            </div>
            <div id='content'>
                <iframe id='cF' frameborder="0")></iframe>
            </div>
       </div>
    </body>
</html>

Answer 2

這可能會奏效

<div> 
   <div id='panel'> </div> 
   <div id='content'> </div> 
</div>

並使#panel float：left

HTML防止在窗口大小調整時移動對象（div）

問題描述

2 個解決方案

解決方案1
1 已采納 2013-08-30 14:52:59

解決方案2
1 2013-08-30 15:06:13

HTML防止在窗口大小調整時移動對象（div）

問題描述

2 個解決方案

解決方案1 1 已采納 2013-08-30 14:52:59

解決方案2 1 2013-08-30 15:06:13

解決方案1
1 已采納 2013-08-30 14:52:59

解決方案2
1 2013-08-30 15:06:13