当浏览器大小/屏幕分辨率发生变化时，如何使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

使用边距/填充时，您可以使用百分比而不是像素来使网页更加灵活。例如，而不是margin: <value>px;使用margin: <value>%;

Answer 2

你可以使用javascript（jquery）轻松解决它。

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

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

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

我也会把它放在一个调整大小的函数中，所以每当你调整屏幕大小时它都会被执行。

问候Timotheus