问题与CSS 100％正确的利润率 - 350像素布局(Problem with right-ma

任何人都可以请帮助我，我一直有一个100％的问题 - 350像素布局嵌入VIMEO视频？

这似乎是正确的利润率属性抵达该处忽略，布局溢出的权利。我希望这一个简单的错误，但好像我已经竭尽所能。我的时间不多了。

帮助将非常感激。

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>

编辑：我使用这种类型此主题定位的解决方案：我该怎么办宽度= 100％ -在CSS 100px的？

Answer 1:

这里是一个jQuery的解决方案，具有多种文档类型，并在Chrome，Firefox和IE浏览器的工作原理。 IE浏览器可能会显示一个空白页，但这是一个Vimeo的问题，可以通过为讨论更新IE Flash插件来解决这里和非常广泛的在这里。

我也放在代码在线。

<!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>

Answer 2:

一个元件的宽度并不必然防止溢出该元件包含在其内的元件。

如果你希望你的DIV不显示以外的东西，它的溢出设置为隐藏： overflow: hidden 。

我什至不知道如果我正确理解您的问题，说实话。如果我完全误读了你的你实际上希望达到的澄清可能会有帮助。

编辑下面

你的做法是有点怪，试试这个：

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


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

此外，你想用的尺寸CSS视频 - CSS不会有一个对象产生任何影响。如果你要改变，说，到video { width: 50px; } video { width: 50px; }它不会让你的视频50像素宽。

Answer 3:

三江源非常埃里克和littlegreen。我已经发现了这个问题。看来，如果你想这样做，你不能使用DOCTYPE。我只是拿出它的工作文档类型和xmlns。奇怪但有效。

Answer 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>

编辑正如埃米尔正确地指出，由于某种原因，这仅适用，如果你不为您的文档DOCTYPE。否则，它在浏览器，但Firefox显示一个空白屏幕。一些测试后，我的结论是，这与用于视频对象给出的百分比宽度做。 Firefox不支持这一点。

由于Vimeo的（不像YouTube的）不允许URL参数传递确定视频大小和百分比宽度显然有怪癖，我唯一的其他建议是指定视频对象（在一个固定的宽度和高度，这样的页面上见页源），设置内容DIV为不可见的可见性，使用Javascript或jQuery函数来确定页面的宽度，相应地改变OBJECT标记的宽度/高度属性，以及所述对象重新设置为可见。这不是很整齐，但它可能会工作，这将是独立的doctype。

编辑我已经实现了这个解决方案，它在所有浏览器上运行。看到它我独立的新的答案。

文章来源: Problem with right-margin with css 100% - 350px layout