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

我的系统的GUI在1366 X 768上运行良好。当它以不同的分辨率显示时，我需要并排滚动，而不应该这样。此外，当我试图在chrome中按下

ctr+-

时，div和section变得不正常

<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> 

Isplika：一个基于Web的IDE，用于C++编程初学者的源内容
我们的力量，我们的上帝
C++代码
行：
1.
上校：
2.
行数：
3.
结果
输入
变量
跑
停止
下一个
支持

---

#电路板

应该可以调整大小，但是

#解释器

和

#标识符

应该是静态的

在应用边距/填充时，可以使用百分比而不是像素，从而使网页更加灵活。例如，不做

margin:px使用
边距：%
您可以使用javascript（jquery）轻松解决它

我也会把它放在一个调整大小的功能中，这样每次你调整屏幕大小时它都会被执行

你好Timotheus
你需要创建一个响应性强的设计，它会对你有用使用%会使它们都可以调整大小，不是吗？我希望解释器和标识符是静态的，你是说它们必须有固定的宽度和高度吗？然后，您可以在代码中指定这些元素的宽度/高度，但可以调整其余元素的大小。另一个选择是，如果您希望它们至少是屏幕宽度的一半，使其达到50%。如果那不是你想要的，请留下一把小小提琴。
jQuery(document).ready(function($) {

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

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