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浏览器中 - 虽然所有好的浏览器都有它们）并使用＆＃39;选择元素＆＃39;选项可以查看哪个项目是真正的限制＆＃39;你的内容。然后你也可以试着把一些随机的元素放在一张桌子上，以确保有内容实际填充＆＃39;到你需要的空间。这应该会给你一个良好的开端。

Answer 2

请注意，如果您不熟悉填充的HTML box model，则可能不直观。 padding已在 width之上应用，因此如果width: 100%;以及padding: 5px 10px;在<body>的直接子元素上1}}然后整个元素将延伸到浏览器窗口之外，从而导致页面侧面的空间并导致滚动条出现。

我认为这可能就是你的情况。这是一个JS小提琴演示：http://jsfiddle.net/9uFtV/2/

如果您想更改框模型，以便width引用内容宽度+填充而不仅仅是内容的宽度，您可以在CSS规则中使用box-sizing: border-box;。 Here's some further reading on the topic

使用宽度时页面侧面的空白区域：100％

2 个答案: