html - 使用宽度 : 100% 时页面一侧的空白区域

Question

我已经看到大量关于此的条目，并且尽可能多地查看了，但没有一个能解决我的问题。以下是我页面的相关 CSS:

html, body
{
    background-color:#E9E9E9;
    font-family: Arial;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

@media screen and (min-width: 900px) {
    #messageListing {
        width: 70%;
        font-family: Arial;
        list-style-type: none;
        padding-left: 15%;
        padding-right: 15%;
    }
}

@media screen and (max-width: 900px) {
    #messageListing {
        width: 100%;
        font-family: Arial;
        list-style-type: none;
        padding: 0px;
        margin: 0px;
    }
}

    #messageListing > ul {
        list-style-type: none;
        padding: 0px;
    }

            @media screen and (min-width: 900px) {
                #messageListing > ul > li > .messageEntry > .messageTitle {
                    width: 100%;
                    display: inline-block;
                    background: -webkit-linear-gradient(#303844, #262c36); /* For Safari */
                    background: -o-linear-gradient(#303844, #262c36); /* For Opera 11.1 to 12.0 */
                    background: -moz-linear-gradient(#303844, #262c36); /* For Firefox 3.6 to 15 */
                    background: linear-gradient(#4D545C, #303338); /* Standard syntax */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D545C', endColorstr='#303338',GradientType=0 ); /* IE6-9 */
                    color: #FFFFFF;
                    padding: 5px 10px;
                    border-top: 1px solid black;
                    border-left: 1px solid black;
                    border-right: 1px solid black;
                    border-bottom: 1px solid black;
                    border-top-right-radius: 5px;
                    border-top-left-radius: 5px;
                    margin-bottom: -4px;
                }
            }

            @media screen and (max-width: 900px) {
                #messageListing > ul > li > .messageEntry > .messageTitle {
                    width: 100%;
                    display: inline-block;
                    background: -webkit-linear-gradient(#303844, #262c36); /* For Safari */
                    background: -o-linear-gradient(#303844, #262c36); /* For Opera 11.1 to 12.0 */
                    background: -moz-linear-gradient(#303844, #262c36); /* For Firefox 3.6 to 15 */
                    background: linear-gradient(#4D545C, #303338); /* Standard syntax */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D545C', endColorstr='#303338',GradientType=0 ); /* IE6-9 */
                    color: #FFFFFF;
                    font-size: 70%;
                    padding: 2px 4px;
                    border-top: 1px solid black;
                    border-left: 1px solid black;
                    border-right: 1px solid black;
                    border-bottom: 1px solid black;
                    border-top-right-radius: 5px;
                    border-top-left-radius: 5px;
                    margin-bottom: -4px;
                }
            }

            #messageListing > ul > li > .messageEntry > .messageTitle > .messageInfo {
                width:100%;
            }

            #messageListing > ul > li > .messageEntry > .messageTitle > .messageBadge {
                float: right;
            }

            .messageDate {
                float: right;
            }

            @media screen and (min-width: 900px) {
                #messageListing > ul > li > .messageEntry > .messageText {
                    width: 100%;
                    display: inline-block;
                    padding: 5px 10px;
                    border-bottom: 1px solid black;
                    border-left: 1px solid black;
                    border-right: 1px solid black;
                    border-bottom-right-radius: 5px;
                    border-bottom-left-radius: 5px;
                    margin-bottom: 5px;
                }
            }

            @media screen and (max-width: 900px) {
                #messageListing > ul > li > .messageEntry > .messageText {
                    width: 100%;
                    display: inline-block;
                    font-size: 70%;
                    padding: 2px 4px;
                    border-bottom: 1px solid black;
                    border-left: 1px solid black;
                    border-right: 1px solid black;
                    border-bottom-right-radius: 5px;
                    border-bottom-left-radius: 5px;
                    margin-bottom: 5px;
                }
            }

#postDiscussionForm {
    padding-top: 20px;
}

到目前为止我已经检查和尝试过的事情:

• 检查 HTML 文件中的所有宽度内容，将其删除，然后再次检查。那里没有填充或边距的东西，也没有任何由静态像素值定义宽度的东西。
• 使用 overflow-x: hidden;，因为它只是不允许横向滚动，但 100% 宽度的消息仍然被截断。
• 将媒体查询宽度设置为百分比而不是像素。

此外，应该注意的是，我将 VS2012 与 MVC 一起使用，关于这一点，我还检查了共享的 .cshtml 文件以及 Site.css 文件，但没有任何帮助。如果需要我提供更多信息，请告诉我，谢谢!

此外，as seen in the Inspect view here ，空格甚至出现在包含的 HTML 标记之外，所以这让我更加困惑。

Another view of the inspect view ，这表明消息以某种方式超出了窗口框架。有人知道那是怎么发生的吗？

编辑:这是 HTML 的 SSCCE 和任何其他可能有帮助的内容:

Details.cshtml

<div id="messageListing">
    <ul></ul>
</div>

.....................................
/* irrelevant JS */
.....................................

if (loginType == "pharmadmin" || loginType == "pharm") {

                $.getJSON("/api/Message/", function (messagesJsonPayload) {
                    $(messagesJsonPayload).each(function (i, item) {
                        if (item.NDC == '@Model.Item1.NDC') {
                            var badge = '';
                            // Check (if user logged in) if unread, update DrugVisit entry
                            if (loginType == "pharmadmin") {
                                if (dateLastSeen != null) {
                                    if (item.Date > dateLastSeen) {
                                        badge = '<img style="padding-right:5px;" src="/Images/message_badge_large.png">';
                                    }
                                }
                                else {
                                    badge = '<img style="padding-right:5px;" src="/Images/message_badge_large.png">';
                                }
                            }
                            $("#messageListing > ul").append('<li><div class="messageEntry"><div class="messageTitle"> \
                                                        ' + '<div class="messageInfo">' + badge + item.User + '<span class="messageDate">' + formatDateForOutput(item.Date) + '</span></div>' + '\
                                                        ' + '<div class="messageBadge">' + '</div></div>' + ' \
                                                        ' + '<div class="messageText">' + item.Text + '</div></div>' + ' \
                                                         </li>');
                        }
                    }
                    );

                    if ($(messagesJsonPayload).length <= 0) {
                        $("#messageListing").prepend("No discussion has been posted for this shortage.");
                    }
                    $(".messagePosting").show();
                });
            }

显示的代码获取当前页面的消息并为每个消息创建 HTML，并将其插入到 messageListing 中。还需要什么，让我知道。再次感谢!

Answer 1

使用 F-12 开发人员工具(在 IE 中 - 虽然所有好的浏览器都有它们)并使用“选择元素”选项来查看哪个元素真正“限制”了您的内容。然后您也可以尝试只放置一些随机元素，例如表格，以确保有内容可以实际“填充”到您需要的空间。这应该会给您一个良好的开端。