0

所以我正在开发 MVC 应用程序，对这个功能不是很有经验，我遇到了一个困扰我的问题。

我的桌面分辨率是 1920x1080。当任何应用程序全屏滚动时，它会正常显示。但是，如果调整窗口大小（例如：单击浏览器右上角的按钮），所有内容都会在中间被挤压。

或者我至少希望我的浏览器/应用程序的全尺寸宽度始终保持不变，并且页面上会显示一个滚动条，因为我没有时间/资源来处理“调整大小”应用程序或脚本，如果那甚至存在的话。

谁能帮我吗？如果您需要，请随时添加信息或询问更多信息，我喜欢学习新东西。

编辑

这是不久前拍摄的一些图像。正常视图：

在此处输入图像描述

当窗口调整大小时：

在此处输入图像描述

来自另一个应用程序的另一张图片：

在此处输入图像描述

调整大小时相同的图像：

在此处输入图像描述

就像我说的那样，在这两种情况下，我希望一切都保持原样，并且用户必须水平滚动。我认为以这种方式开发会比重新计算/调整所有内容更“痛苦”......

编辑 2

对于那些熟悉 MVC 模板的人，这里是我为我的一个应用程序添加的一些编码，也许这将有助于我理解正在发生的事情。

首先是_Layout观点：

<div id="body">
    <div>
        <div id="leftSide">
            @{
                Html.RenderAction("ShowCardSetLinks", "Home");
            }
        </div>
        <div id="inner">
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>  
        </div>
        <div id="rightSide">
            @{
                Html.RenderAction("GetCardOfTheDay", "Home");
            }
        </div>
    </div>
    <div id="dialog-modal" title="See Card Detail"></div>
</div>

然后我添加的CSS：

#body {
    width: 1920px;
    display: table-cell;
    table-layout: fixed;
}

#leftSide {
    width: 20%;
    display: table-cell;
    position: relative;
}

#rightSide {
    width: 20%;
    display: table-cell;
    position: relative;
}

#inner {
    width: 70%;
    display: table-cell;
    position: relative;
}

主要布局就是这样，如果我还有什么，我会发布它。

4

1 回答 1

1

display: table-cell;从所有 CSS 中删除。这不是适当的结构。特别是从body标签和表格布局中删除它（可怕的兄弟）。为什么你的身体标签上也有一个宽度 - 而且这么大？这根本不是一个好的编码实践......改变这个，让我知道它是否有效。包装您的所有主要内容是一个包装器，其中包含我在下面指定的类。

您还有 70%、20% 和 20% 作为宽度。那是 110%。观察值不能超过 100%。我改变了这个。

编辑：我看到你有一个名为 BODY 的 ID，它不是body标签（你应该重命名它）。我的错。请参阅下面的更新...

#body {
position:relative;
margin:0 auto;
width:100%; // change it to whatever value you want your site, but don't exceed 980px. Just leave it at 100% if you want a fluid site.
overflow: hidden;
clear:both;
}

#leftSide {
width: 20%;
position: relative;
float:left;
}

#rightSide {
width: 20%;
position: relative;
float:left;
}

#inner {
width: 60%;
position: relative;
float:left;
}
于 2013-11-13T22:12:11.523 回答