Html 棘手的CSS布局_Html_Css_Width_Standards Compliance

Html 棘手的CSS布局

html css

Html 棘手的CSS布局,html,css,width,standards-compliance,Html,Css,Width,Standards Compliance,所以我正在制作一个布局有问题的网站。有四个角图像TL、TR、BL和BR由黑色块表示。深橙色区域是主要内容（宽度为960px），外部区域用绿色箭头表示为浏览器窗口。见图表：顶部图像表示站点的最窄位置-不允许其窄于此（960px），如果它大于定义的区域，则不应存在滚动条。底部的两个图像表示浏览器的不同宽度左下角和右下角的黑色块（图像）应始终位于屏幕的左下角和右下角，除非宽度降至960px，在这种情况下，BL和BR图像应略微插入主区域。如果站点缩小到，比如200px，BR图像不应该仍然出现在右角

所以我正在制作一个布局有问题的网站。有四个角图像TL、TR、BL和BR由黑色块表示。深橙色区域是主要内容（宽度为960px），外部区域用绿色箭头表示为浏览器窗口。见图表：

顶部图像表示站点的最窄位置-不允许其窄于此（960px），如果它大于定义的区域，则不应存在滚动条。底部的两个图像表示浏览器的不同宽度

左下角和右下角的黑色块（图像）应始终位于屏幕的左下角和右下角，除非宽度降至960px，在这种情况下，BL和BR图像应略微插入主区域。如果站点缩小到，比如200px，BR图像不应该仍然出现在右角

在这一点上，我并不真正关心它在IE6中是否能正常工作（我可以让它大致正常工作），但我甚至不知道如何在没有Javascript或非常实验性的CSS的情况下完全做到这一点。目前我正在使用绝对定位div的哪种工作，但工作不完全正确

我想如果没有其他办法，我会愿意接受一点JS，但我不愿意

非常感谢您的回答

唯一真正棘手的部分是底部。其余部分相当简单：

<body>
    <div id="container">
        <div id="header">
            <div class="right"></div>
            <div class="left"></div>
        </div>

        <div id="footer">
            <div class="right"></div>
            <div class="left"></div>
        </div>
    </div>
</body>

对于

#footer

，还有一些类似的东西，但是您需要使用一点javascript来检测窗口宽度，并稍微调整

左侧的。
类似的东西？如果愿意的话，您可以用类似的JQuery代码替换JavaScript代码，只是想了解一下这是如何工作的
<html>
<head>
  <title>....</title>

  <style type="text/css">
  html
  { height: 100%; margin: 0; background: white; }
  body
  { height: 100%; width: 960px; margin: 0 auto; background: gray; overflow: hidden; }
  #main
  { margin: 0px; padding: 5px 20px; position: relative; }

  #headLeft
  { position: absolute; top: 0px; left: -80px;
    width: 100px; height: 35px; background: green; }
  #headRight
  { position: absolute; top: 0px; right: -80px;
    width: 100px; height: 35px; background: green; }
  #footLeft
  { position: absolute; bottom: 0px; left: 0px;
    width: 100px; height: 35px; background: green; }
  #footRight
  { position: absolute; bottom: 0px; right: 0px;
    width: 100px; height: 35px; background: green; }
  </style>

  <script type="text/javascript">
  function checkSize ( event )
  {
    var contentWidth = 960;
    var minOuterBoxSize = 60; // maximum 100-60=40 px will be displayed inside the main area

    if ( window.innerWidth - contentWidth < minOuterBoxSize * 2 )
    {
      var pos = ( ( minOuterBoxSize * 2 ) - window.innerWidth + contentWidth ) / 2;
      document.getElementById( 'footLeft' ).style.left = '-' + pos;
      document.getElementById( 'footRight' ).style.right = '-' + pos;
    }
    else
    {
      document.getElementById( 'footLeft' ).style.left = '0px';
      document.getElementById( 'footRight' ).style.right = '0px';
    }
  }
  </script>
</head>

<body onload="checkSize( event );" onresize="checkSize( event );">
 <div id="main">
  <div id="headLeft">TL</div>
  <div id="headRight">TR</div>

  <p>Normal content</p>
 </div>

 <div id="footLeft">BL</div>
 <div id="footRight">BR</div>
</body>
</html>


....
html
{高度：100%；边距：0；背景：白色；}
身体
{高度：100%；宽度：960px；边距：0自动；背景：灰色；溢出：隐藏；}
#主要
{边距：0px；填充：5px20px；位置：相对；}
#头左
{位置：绝对；顶部：0px；左侧：-80px；
宽度：100px；高度：35px；背景：绿色；}
#头灯
{位置：绝对；顶部：0px；右侧：-80px；
宽度：100px；高度：35px；背景：绿色；}
#左脚
{位置：绝对；底部：0px；左侧：0px；
宽度：100px；高度：35px；背景：绿色；}
#右脚
{位置：绝对；底部：0px；右侧：0px；
宽度：100px；高度：35px；背景：绿色；}
函数检查大小（事件）
{
var-contentWidth=960；
var minOuterBoxSize=60；//主区域内将显示最大100-60=40像素
if（window.innerWidth-contentWidth
基本法
溴
不需要Javascript。至少在大多数现代浏览器中是这样。通过简单的定位和一个@media查询，我成功了：
<head>
  <style type="text/css" media="screen">
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: orange;
      text-align: center;
      color: black;
      overflow-x: hidden;
    }
    #content {
      width: 960px;
      margin: 0 auto;
      padding: 20px 0;
      min-height: 800px;
      background: #cc6600;
      z-index: 0;
    }
    .image {
      background: black;
      color: white;
      height: 60px;
      width: 100px;
      padding: 20px 0;
      z-index: 1;
      opacity: .95;
    }
    #top {
      width: 960px;
      margin: 0 auto;
      position: relative;
      overflow: visible;
    }
    #top .image {
      position: absolute;
    }
    #top .left {
      left: -80px;
    }
    #top .right {
      right: -80px;
    }
    #bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 100px;
    }
    #bottom .image {
      position: absolute;
    }
    #bottom .left {
      left: 0;
    }
    #bottom .right {
      right: 0;
    }

    @media all and (max-width:1120px) {

      #container {
        width: 960px;
        margin: 0 auto;
        position: relative;
        overflow: visible;
      }
      #bottom .left {
        left: -80px;
      }
      #bottom .right {
        right: -80px;
      }    

    }
  </style>
</head>
<body>
  <div id="top">
    <div class="left image">left image</div>
    <div class="right image">right image</div>    
  </div>
  <div id="content">
    content
  </div>
  <div id="bottom">
    <div id="container">
      <div class="left image">left image</div>
      <div class="right image">right image</div>
    </div>
  </div>
</body>


身体{
保证金：0；
填充：0；
字体系列：无衬线；
背景：橙色；
文本对齐：居中；
颜色：黑色；
溢出x：隐藏；
}
#内容{
宽度：960px；
保证金：0自动；
填充：20px0；
最小高度：800px；
背景：#cc6600；
z指数：0；
}
.形象{
背景：黑色；
颜色：白色；
高度：60px；
宽度：100px；
填充：20px0；
z指数：1；
不透明度：.95；
}
#顶{
宽度：960px；
保证金：0自动；
位置：相对位置；
溢出：可见；
}
#上图{
位置：绝对位置；
}
#左上角{
左：-80px；
}
#顶部，对{
右：-80px；
}
#底部{
位置：固定；
底部：0；
宽度：100%；
高度：100px；
}
#底部。图像{
位置：绝对位置；
}
#底部，左边{
左：0；
}
#底部，对{
右：0；
}
@介质和全部（最大宽度：1120px）{
#容器{
宽度：960px；
保证金：0自动；
位置：相对位置；
溢出：可见；
}
#底部，左边{
左：-80px；
}
#底部，对{
右：-80px；
}    
}
左图
正确形象
内容
左图
正确形象

这可能属于你所说的“极具实验性的CSS”，但我想你会惊讶于它的支持程度，以及用一点JS引导它是多么容易——只需在重新调整大小时检查浏览器宽度，并在宽度低于1120px时添加额外的CSS。
伙计，你已经有了一些疯狂的布局了！：我知道，这一次我真的让自己失败了（注：我将悬赏这个问题，并将其交给任何回答的人。不幸的是，你必须等待24小时左右才能发放悬赏（或者我现在就这么做）但是我会等那么长时间，这样做，然后把你标记为正确的答案。谢谢！@myfreeweb：并不是所有放置在边缘的图形都是圆角…而且底部图形的行为与你期望的简单边界图像完全不同..我有一种感觉，你必须在底部角落使用JavaScript…我有一些ng与此类似-问题是正绝对位置的#header.right会导致滚动条。我甚至可以接受这一点，但页脚不起作用。（@meep3d-我无法测试这一点，但请尝试在body标记上设置overflow-x:hidden；。它可能通过隐藏元素来解决滚动条问题（或身体元素之外的元素的一部分）。这听起来有悖直觉，但可能有效。如果不行，
<head>
  <style type="text/css" media="screen">
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: orange;
      text-align: center;
      color: black;
      overflow-x: hidden;
    }
    #content {
      width: 960px;
      margin: 0 auto;
      padding: 20px 0;
      min-height: 800px;
      background: #cc6600;
      z-index: 0;
    }
    .image {
      background: black;
      color: white;
      height: 60px;
      width: 100px;
      padding: 20px 0;
      z-index: 1;
      opacity: .95;
    }
    #top {
      width: 960px;
      margin: 0 auto;
      position: relative;
      overflow: visible;
    }
    #top .image {
      position: absolute;
    }
    #top .left {
      left: -80px;
    }
    #top .right {
      right: -80px;
    }
    #bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 100px;
    }
    #bottom .image {
      position: absolute;
    }
    #bottom .left {
      left: 0;
    }
    #bottom .right {
      right: 0;
    }

    @media all and (max-width:1120px) {

      #container {
        width: 960px;
        margin: 0 auto;
        position: relative;
        overflow: visible;
      }
      #bottom .left {
        left: -80px;
      }
      #bottom .right {
        right: -80px;
      }    

    }
  </style>
</head>
<body>
  <div id="top">
    <div class="left image">left image</div>
    <div class="right image">right image</div>    
  </div>
  <div id="content">
    content
  </div>
  <div id="bottom">
    <div id="container">
      <div class="left image">left image</div>
      <div class="right image">right image</div>
    </div>
  </div>
</body>