css 100% - 350px 布局的右边距问题答案

【问题标题】：Problem with right-margin with css 100% - 350px layoutcss 100% - 350px 布局的右边距问题
【发布时间】：2010-01-30 20:48:30
【问题描述】：

谁能帮我解决我在嵌入 vimeo 视频的 100% - 350px 布局时遇到的问题？

似乎 right-margin 属性在这里被忽略了，并且布局向右溢出。我希望这是一个简单的错误，但似乎我已经尝试了一切。我没时间了。

非常感谢您的帮助。

css:

#container {
 position:absolute;
 width:100%;
    height:100%;
}

#content {
 width:100%;
 height:100%;
 margin-left:350px;
 margin-right:350px;
}

.video {
 padding:0 0 0 0;
 height:100%;
 width:100%;
}

html（vimeo 嵌入代码已重新格式化以进行验证）：

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
     <div style="clear:both; height:1px; line-height:0">&nbsp;</div>
  </div>
</div>

编辑：我尝试过的另一种解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#container {
    position:absolute;
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
}

.video {
    padding:0 0 0 0;
    width:100%;
    height:100%;
}
</style>
</head>

<body>

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
  </div>
</div>

</body>
</html>
</head>

编辑：我正在使用来自该线程的此类定位的解决方案：How can I do width = 100% - 100px in CSS?

【问题讨论】：

标签： layout css

【解决方案1】：

这是一个 jQuery 解决方案，适用于多种文档类型，适用于 Chrome、Firefox 和 IE。 IE 可能会显示空白页，但这是 Vimeo 问题，可以通过更新 IE flash 插件来解决，如 here 和 very extensively here 所述。

我也有placed the code online。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vimeo test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">

    jQuery(function($){
        $(window).load(function() {
            var h = $(window).height() * 0.9;
            var w = $("#content").width();
            $(".video").width(w);
            $(".video").height(h);
            $("#content").css('visibility', 'visible');
        });
    });

</script>
<style type="text/css">

#container {
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
    visibility: hidden;
}

</style>
</head>
<body>

<div id="container">
    <div id="content">
        <object class="video" width="400" height="225">
            <param name="allowfullscreen" value="true" />
            <param name="allowscriptaccess" value="always" />
            <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
            <embed class="video" src="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
        </object>
    </div>
</div>

</body>
</html>

【讨论】：

【解决方案2】：

元素的宽度不一定能防止其中包含的元素溢出该元素。

如果您希望不显示 DIV 之外的内容，请将其溢出设置为隐藏：overflow: hidden。

说实话，我什至不确定我是否正确理解了您的问题。如果我完全误读了您，澄清您实际希望实现的目标可能会有所帮助。

在下面编辑

你的方法有点奇怪，试试这个：

<div id="container">
    <object> ... </object>
</div>


<style>
  #container { position: absolute; right: 5px; }
</style>

此外，您正在尝试使用 CSS 调整视频大小 - CSS 不会对对象产生任何影响。例如，如果您要更改为 video { width: 50px; }，它不会使您的视频宽 50 像素。

【讨论】：

感谢您的快速回复。我现在拥有的代码的问题是视频向右溢出。我希望视频停在屏幕边缘。这是截图：s877.photobucket.com/albums/ab334/0000ffo/….
我对您的编辑感到困惑。 Object CSS 样式确实影响了视频的宽度。我想让视频对象成为 100% 的宽度和高度 - 350px 布局，我这样做的原因是因为可以在这个线程上找到解决方案：stackoverflow.com/questions/899107/…
非常感谢您抽出时间 Erik，我真的很感激。我已将该解决方案作为“新解决方案”发布。
其实CSS确实对对象有影响。至少当他不使用 DOCTYPE 时。你怎么解释这个？调整视频对象大小的“正确”方法是什么？
查看任何 youtube 视频中的嵌入代码； object 标签有 height 和 width 属性——就像 img 标签一样。

【解决方案3】：

非常感谢 Erik 和 littlegreen。我发现了问题。如果你想这样做，你似乎不能使用 DOCTYPE。我刚刚取出了它工作的 Doctype 和 xmlns。奇怪但有效。

【讨论】：

我已经通过 W3C 验证器运行了具有多个 doctype 的代码，但没有任何结果.. 这个解决方案对我来说仍然很“恶心”，如果未来的浏览器决定以不同的方式猜测标准 doctype 怎么办?我已经编辑了我的解决方案以建议一种独立于 Doctype 的 Javascript 方法。丑陋，但它可能会工作。
太好了，会试试这个。谢谢。

【解决方案4】：

为了使视频更小以停在屏幕右侧（适合屏幕），您必须删除一些 100% 属性并进行更多编辑。这是新的 CSS 和 HTML。

CSS

#container {
    width:100%;
    height:100%;
}

#content {
    margin-left: 350px;
    margin-right: 0px;
}

.video {
    padding:0 0 0 0;
    width:100%;
    height:90%;
}

HTML

<div id="container">
   <div id="content">
      <object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff">
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
        <param name="color" value="ffffff" />
     <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
      </object>
  </div>
</div>

编辑正如 Emile 正确指出的那样，由于某种原因，这仅在您没有为文档设置 DOCTYPE 时才有效。否则它可以在 Chrome 中运行，但 Firefox 显示一个空白屏幕。经过一些测试后，我得出结论，这与为视频对象指定的百分比宽度有关。 Firefox 不支持。

由于 Vimeo（与 YouTube 不同）不允许传递 URL 参数来确定视频大小，并且百分比宽度显然有怪癖，我唯一的其他建议是在视频对象上指定一个固定的宽度和高度（@ 987654321@)，将内容DIV的可见性设置为不可见，使用Javascript或jQuery函数确定页面宽度，相应更改OBJECT标签的宽度/高度属性，并再次将对象设置为可见。它不是很整洁，但它可能会工作，并且它会独立于 doctype。

编辑我已经实现了这个解决方案，它适用于所有浏览器。请参阅我关于它的单独新答案。

【讨论】：

谢谢，不幸的是我已经尝试过这个解决方案，我得到了以下结果： Chrome - 运行良好：截图 - s877.photobucket.com/albums/ab334/0000ffo/… IE8 - 视频在屏幕上太高：截图 - s877.photobucket.com/albums/ab334/0000ffo/… Firefox - 视频丢失：屏幕截图 - s877.photobucket.com/albums/ab334/0000ffo/… 我将overflow-x 和overflow-y 设置为隐藏。
哦，我想让视频停在屏幕的右侧。
好的，我已经缩小了我的回答范围以反映你的澄清。顺便说一句，我测试了我的代码，它可以在 Chrome、Firefox 和 IE 中运行。您是按字面意思复制粘贴我的代码吗？
更正，IE 不显示视频，但视频帧的大小是正确的。另请参阅：antiflu.dds.nl/so3
我确实复制粘贴了代码，这很奇怪。页面上一定还有其他东西在弄乱这个。感谢您的澄清，我将不得不进行一些代码筛选。