个人中心
gpt4 book ai didi

html - 调整浏览器窗口大小时如何使 div 流畅？

转载 作者：行者123 更新时间：2023-11-28 16:18:32 29 4
gpt4 key购买 nike

我不确定其他与我的问题明显相似的问题是否归结为同一主题。

请考虑这段代码(为更清楚起见，为 head 部分提取了 CSS 代码):

body {
            margin: 0;
            overflow: hidden;
}

#centredArea {
            background-color: red;
            width: 600px;
            margin: auto;
            min-height: 2000px;
            min-width: 500px;
            text-align: right;
}

#container {
            min-width: 396px;
            padding: 1px;
}

#leftPane {
            background-color: yellowgreen;
            width: 20%;
            min-width: 100px;
            float: left;
            height: 1200px;
}

#rightPane {
            background-color: blue;
            width: 79%;
            float: left;
            height: 1200px;
}

#pictArea {
            height: 140px;
            background-color: pink;
            width: 60%;
            margin: auto;
            margin-top: 40px;
            margin-bottom: 20px;
}

#mainTxtArea {
            height: 200px;
            min-height: 100px;
            min-width: 200px;
            background-color: yellow;
            width: 80%;
            overflow-y: scroll;
            padding: 12px;
            margin: auto;
            text-align: left;
}


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>home.htm</title>
    </head>
    <body>
        <div id="centredArea">CENTRERED AREA
            <div id='container'>
                <div id="leftPane">LEFT PANE</div>
                <div id="rightPane">
                    <div id='pictArea'>PICT AREA</div>
                    <div id='mainTxtArea'>
                        It may not be unnecessary to inform the reader that the following Reflections had their origin in a correspondence between the Author and avery young gentleman at Paris, who did him the honor of desiring his opinion  upon  the  important  transactions  which  then,  and  ever  since,have so much occupied the attention of all men. An answer was written some time in the month of October 1789, but it was kept back uponprudential considerations. That letter is alluded to in the beginning ofthe following sheets. It has been since forwarded to the person to whom it was addressed. The reasons for the delay in sending it were assigned in a short letter to the same gentleman. This produced on his part a new and pressing application for the Author’s sentiments.<p>
                     The Author began a second and more full discussion on the subject.This he had some thoughts of publishing early in the last spring; but, the matter gaining upon him, he found that what he had undertaken not only far exceeded the measure of a letter, but that its importance required rather a more detailed consideration than at that time he had any leisure to bestow upon it. However, having thrown down his first thoughts inthe  form  of  a  letter,  and,  indeed,  when  he  sat  down  to  write,  havingintended it for a private letter, he found it difficult to change the form ofaddress when his sentiments had grown into a greater extent and had received another direction. A different plan, he is sensible, might be more favorable to a commodious division and distribution of his matter.<p>
                    It may not be unnecessary to inform the reader that the following Reflections had their origin in a correspondence between the Author and avery young gentleman at Paris, who did him the honor of desiring his opinion  upon  the  important  transactions  which  then,  and  ever  since,have so much occupied the attention of all men. An answer was written some time in the month of October 1789, but it was kept back uponprudential considerations. That letter is alluded to in the beginning ofthe following sheets. It has been since forwarded to the person to whom it was addressed. The reasons for the delay in sending it were assigned in a short letter to the same gentleman. This produced on his part a new and pressing application for the Author’s sentiments.<p>
                        The Author began a second and more full discussion on the subject.This he had some thoughts of publishing early in the last spring; but, thematter gaining upon him, he found that what he had undertaken not onlyfar exceeded the measure of a letter, but that its importance required rather a more detailed consideration than at that time he had any leisure to bestow upon it. However, having thrown down his first thoughts inthe  form  of  a  letter,  and,  indeed,  when  he  sat  down  to  write,  havingintended it for a private letter, he found it difficult to change the form ofaddress when his sentiments had grown into a greater extent and had received another direction. A different plan, he is sensible, might be more favorable to a commodious division and distribution of his matter.<p>
                        It may not be unnecessary to inform the reader that the following Reflections had their origin in a correspondence between the Author and avery young gentleman at Paris, who did him the honor of desiring his opinion  upon  the  important  transactions  which  then,  and  ever  since,have so much occupied the attention of all men. An answer was written some time in the month of October 1789, but it was kept back uponprudential considerations. That letter is alluded to in the beginning ofthe following sheets. It has been since forwarded to the person to whom it was addressed. The reasons for the delay in sending it were assigned in a short letter to the same gentleman. This produced on his part a new and pressing application for the Author’s sentiments.<p>
                        The Author began a second and more full discussion on the subject.This he had some thoughts of publishing early in the last spring; but, thematter gaining upon him, he found that what he had undertaken not onlyfar exceeded the measure of a letter, but that its importance required rather a more detailed consideration than at that time he had any leisure to bestow upon it. However, having thrown down his first thoughts inthe  form  of  a  letter,  and,  indeed,  when  he  sat  down  to  write,  havingintended it for a private letter, he found it difficult to change the form ofaddress when his sentiments had grown into a greater extent and had received another direction. A different plan, he is sensible, might be more favorable to a commodious division and distribution of his matter.<p>
                        It may not be unnecessary to inform the reader that the following Reflections had their origin in a correspondence between the Author and avery young gentleman at Paris, who did him the honor of desiring his opinion  upon  the  important  transactions  which  then,  and  ever  since,have so much occupied the attention of all men. An answer was written some time in the month of October 1789, but it was kept back uponprudential considerations. That letter is alluded to in the beginning ofthe following sheets. It has been since forwarded to the person to whom it was addressed. The reasons for the delay in sending it were assigned in a short letter to the same gentleman. This produced on his part a new and pressing application for the Author’s sentiments.<p>
                      The Author began a second and more full discussion on the subject.This he had some thoughts of publishing early in the last spring; but, thematter gaining upon him, he found that what he had undertaken not onlyfar exceeded the measure of a letter, but that its importance required rather a more detailed consideration than at that time he had any leisure to bestow upon it. However, having thrown down his first thoughts inthe  form  of  a  letter,  and,  indeed,  when  he  sat  down  to  write,  havingintended it for a private letter, he found it difficult to change the form ofaddress when his sentiments had grown into a greater extent and had received another direction. A different plan, he is sensible, might be more favorable to a commodious division and distribution of his matter.<p>
                    </div>           
                </div>
            </div>
        </div>
    </body>
</html>

在这个 fiddle 中:https://jsfiddle.net/BCoustillas/7oxk0fgr/24/使“浏览器 Pane ”足够高，以便您可以看到整个#mainTxtArea(黄色)，其中有一个 y 滚动设备。

现在，如果您以通常的方式垂直缩小浏览器窗口的大小，黄色区域不会适应剩余空间，而是保持其原始高度大小并逐渐脱离浏览器窗口的 graf 端口。

我的 CSS 代码有什么问题？

最佳答案

也许对你有帮助。请检查下面的代码

body {
            margin: 0;
            overflow: hidden;
}

#centredArea {
            background-color: red;
            width: 600px;
            margin: auto;
            min-height: 2000px;
            text-align: right;
            max-width:100%;
}

#container {
            padding: 1px;
}

#leftPane {
            background-color: yellowgreen;
            width: 20%;
            float: left;
            height: 1200px;
}

#rightPane {
            background-color: blue;
            width: 79%;
            float: left;
            height: 1200px;
}

#pictArea {
            height: 140px;
            background-color: pink;
            width: 60%;
            margin: auto;
            margin-top: 40px;
            margin-bottom: 20px;
}

#mainTxtArea {
            height: 200px;
            min-height: 100px;
            background-color: yellow;
            width: 80%;
            overflow-y: scroll;
            padding: 12px;
            margin: auto;
            text-align: left;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>home.htm</title>
</head>
<body>
    <div id="centredArea">CENTRERED AREA<!-- +++ -->
        <div id='container'>
            <div id="leftPane" class='coteACote'>LEFT PANE</div>
            <div id="rightPane" class='coteACote'>
                <div id='pictArea'>PICT AREA</div>
                <div id='mainTxtArea'>
                    It may not be unnecessary to inform the reader that the following Reflections had their origin in a correspondence between the Author and avery young gentleman at Paris, who did him the honor of desiring his opinion  upon  the  important  transactions  which  then,  and  ever  since,have so much occupied the attention of all men. An answer was written some time in the month of October 1789, but it was kept back uponprudential considerations. That letter is alluded to in the beginning ofthe following sheets. It has been since forwarded to the person to whom it was addressed. The reasons for the delay in sending it were assigned in a short letter to the same gentleman. This produced on his part a new and pressing application for the Author’s sentiments.<p>
                    The Author began a second and more full discussion on the subject.This he had some thoughts of publishing early in the last spring; but, thematter gaining upon him, he found that what he had undertaken not onlyfar exceeded the measure of a letter, but that its importance required rather a more detailed consideration than at that time he had any leisure to bestow upon it. However, having thrown down his first thoughts inthe  form  of  a  letter,  and,  indeed,  when  he  sat  down  to  write,  havingintended it for a private letter, he found it difficult to change the form ofaddress when his sentiments had grown into a greater extent and had received another direction. A different plan, he is sensible, might be more favorable to a commodious division and distribution of his matter.<p>
                    It may not be unnecessary to inform the reader that the following Reflections had their origin in a correspondence between the Author and avery young gentleman at Paris, who did him the honor of desiring his opinion  upon  the  important  transactions  which  then,  and  ever  since,have so much occupied the attention of all men. An answer was written some time in the month of October 1789, but it was kept back uponprudential considerations. That letter is alluded to in the beginning ofthe following sheets. It has been since forwarded to the person to whom it was addressed. The reasons for the delay in sending it were assigned in a short letter to the same gentleman. This produced on his part a new and pressing application for the Author’s sentiments.<p>
                    The Author began a second and more full discussion on the subject.This he had some thoughts of publishing early in the last spring; but, thematter gaining upon him, he found that what he had undertaken not onlyfar exceeded the measure of a letter, but that its importance required rather a more detailed consideration than at that time he had any leisure to bestow upon it. However, having thrown down his first thoughts inthe  form  of  a  letter,  and,  indeed,  when  he  sat  down  to  write,  havingintended it for a private letter, he found it difficult to change the form ofaddress when his sentiments had grown into a greater extent and had received another direction. A different plan, he is sensible, might be more favorable to a commodious division and distribution of his matter.<p>
                    It may not be unnecessary to inform the reader that the following Reflections had their origin in a correspondence between the Author and avery young gentleman at Paris, who did him the honor of desiring his opinion  upon  the  important  transactions  which  then,  and  ever  since,have so much occupied the attention of all men. An answer was written some time in the month of October 1789, but it was kept back uponprudential considerations. That letter is alluded to in the beginning ofthe following sheets. It has been since forwarded to the person to whom it was addressed. The reasons for the delay in sending it were assigned in a short letter to the same gentleman. This produced on his part a new and pressing application for the Author’s sentiments.<p>
                    The Author began a second and more full discussion on the subject.This he had some thoughts of publishing early in the last spring; but, thematter gaining upon him, he found that what he had undertaken not onlyfar exceeded the measure of a letter, but that its importance required rather a more detailed consideration than at that time he had any leisure to bestow upon it. However, having thrown down his first thoughts inthe  form  of  a  letter,  and,  indeed,  when  he  sat  down  to  write,  havingintended it for a private letter, he found it difficult to change the form ofaddress when his sentiments had grown into a greater extent and had received another direction. A different plan, he is sensible, might be more favorable to a commodious division and distribution of his matter.<p>
                    It may not be unnecessary to inform the reader that the following Reflections had their origin in a correspondence between the Author and avery young gentleman at Paris, who did him the honor of desiring his opinion  upon  the  important  transactions  which  then,  and  ever  since,have so much occupied the attention of all men. An answer was written some time in the month of October 1789, but it was kept back uponprudential considerations. That letter is alluded to in the beginning ofthe following sheets. It has been since forwarded to the person to whom it was addressed. The reasons for the delay in sending it were assigned in a short letter to the same gentleman. This produced on his part a new and pressing application for the Author’s sentiments.<p>
                    The Author began a second and more full discussion on the subject.This he had some thoughts of publishing early in the last spring; but, thematter gaining upon him, he found that what he had undertaken not onlyfar exceeded the measure of a letter, but that its importance required rather a more detailed consideration than at that time he had any leisure to bestow upon it. However, having thrown down his first thoughts inthe  form  of  a  letter,  and,  indeed,  when  he  sat  down  to  write,  havingintended it for a private letter, he found it difficult to change the form ofaddress when his sentiments had grown into a greater extent and had received another direction. A different plan, he is sensible, might be more favorable to a commodious division and distribution of his matter.<p>
                </div>           
            </div>
        </div>
    </div>
</body>
</html>

关于html - 调整浏览器窗口大小时如何使 div 流畅？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55097829/

29 4 0
文章推荐： javascript - 如何在脚本中添加新行
文章推荐： ios - x，y位置在使用手势识别器IOS旋转时发生变化
文章推荐： javascript - js 正则表达式清理除数字之外的所有内容
文章推荐： html - Bootstrap - 在顶栏中显示图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com