css - 当浏览器大小/屏幕分辨率发生变化时，如何使 div/section 灵活？

Question

我的系统的 GUI 在 1366 X 768 分辨率下运行良好。当它以不同的分辨率显示时，我需要并排滚动，而它不应该这样。此外，当我尝试在 chrome 中按 ctr+- 时，div 和部分变得困惑。

<header>
    <h1><font color = "#666" face="Arial Black" size="5%">&nbsp;&nbsp;&nbsp;Isplika:</font> A Web-based IDE for C++ Source Content for Programming  Beginners
    <span id = "strength" > Our Stength, Our God Ü </span>
    </h1>
</header> 

<div id = "wrapper">

    <section id = "board">

        <section id = "board_c">
            <div id = "board_ln"> </div>
            <div id = "board_code_w">
                <div id = "tags_c" class = "tags">C++ Code</div>
                <div id = "board_code" contenteditable = "true" ></div>
                <div id = "board_code_dup" contenteditable = "false"></div>
            </div>
        </section>

        <section id = "board_mb">   
        </section>

        <section id = "board_code_info">

           Row: 
           <section id = "row" class="tab_space_right">
            1
           </section> 

           Col:
           <section id = "col" class="tab_space_right">
             2
           </section>

           Number of Lines:
           <section id = "numLines" class="tab_space_right">
             3  
           </section>

        </section>
    </section>

    <section id = "interpreter">
        <div id = "tags_int" class = "tags">Result</div>
        <section id = "interpreter_c">
        </section>
        <section id = "interpreter_input">
        <input id = "inputF" type = "text" />
        </section>
        <div id = "inputB" class="buttons">
        INPUT
        </div>
    </section>    

    <section id = "identifier">

            <div id = "tags_iden" class = "tags">Variables</div>

            <section id = "identifier_type">

            </section>

            <section id = "identifier_name" >

            </section>

            <section id = "identifier_value">

            </section>
    </section>    

    <section id = "controls">
        <div id = "run" class = "buttons" >RUN</div>
        <div id = "stop" class = "buttons" >STOP</div>
        <div id = "next" class = "buttons" >NEXT</div>
        <div id = "support" class = "buttons" >SUPPORT</div>
    </section>
</div>

</body>
</html> 

#board 应该是可调整大小的，但是 #interpreter 和 #identifier 应该是静态的

Answer 1

你可以用javascript(jquery)轻松解决。

jQuery(document).ready(function($) {

    function resizeBoard(){
        $('#board').css(width, ($(window).width() - $(#interpreter).width());
    }
    resizeBoard();

    $(window).resize(function() {
         resizeBoard();  
    });
});

我还将它放在一个调整大小的函数中，这样每次你调整屏幕大小时它都会被执行。

问候提摩太