尽管将 ContentPlaceHolder 和 <div> 设置为宽度：100%，但内容溢出屏幕答案

【问题标题】：Content overshot screen despite putting ContentPlaceHolder & <div> as width :100%尽管将 ContentPlaceHolder 和 <div> 设置为宽度：100%，但内容溢出屏幕
【发布时间】：2014-02-25 14:36:40
【问题描述】：

我正在创建一个能够在手机上查看的 web 应用程序，它非常适合屏幕。到目前为止，我已经通过更改相应 webapp 的 CSS 进行了尝试。最初它非常适合如下对下拉列表框进行任何选择。

但是，选择填充有图像/文本的选区，布局会发生巨大变化。

这是我的 CSS 代码，我在其中重新调整父布局的大小，即 ContentPlaceHolder，如下所示

#ContentPlaceHolder
{
  position:absolute;
  margin:0px;
  width:100%;
  left:0px;
}

我已经通过这个标签在母版页中插入了这个 contentplaceholder css 属性

<div id="ContentPlaceHolder"></div>

下面所有细节的布局都归类为headerbody。

#headerbody
{
  margin-top:50px;
  position:absolute;
  left:0%;
  margin: 0px;
  width:100%;


}

图中显示的3个文本框也有一个width:100%属性，如下图。

<asp:TextBox ID="txtOR" runat="server" ReadOnly="True" TextMode="MultiLine" Height="80px" Width="100%"></asp:TextBox>

据我所知，只要作为 contentplaceholder 的父布局是 100%，图片不应该超过 100% 吗？它可以在我的桌面上完美运行，但不能在我的 Opera 模拟器上运行。如果有人能在这方面启发我，将不胜感激。

问候。

更新通过减小我为图像固定的大小，它很好地修复了我的移动模拟器。但是，图片有点太小了。是否有可能所有 5 张图片都很好地适合屏幕？

【问题讨论】：

图片宽度可能是固定的？
我将图像固定为 250x250。但是，内容占位符固定为 100% 宽度。不应该超过这个吗？不过，它在我的桌面上运行得非常好。
对于更新：是的，有一些方法可以调整您的图片大小。对于之前的评论，请通过一些开发工具检查 contentplaceholder div 的父元素都没有固定宽度或设置任何 min-width 或 max-width 参数
尝试为 html html { width:960px; } 提供宽度

标签： c# css

【解决方案1】：

作为替代方案，请尝试使用：

<div style="width:80%;overflow-y: visible">
<ul style="width:100%">
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
</ul>

</div>

溢出-y：可见；将水平滚动条添加到容器 div。

【讨论】：

【解决方案2】：

#ContentPlaceHolder
{
  position:absolute;
  margin:0px;
  width:100%;
  left:0;
  right:0;
}

【讨论】：

没有区别。图片仍然超出了我的幻灯片和导航栏