Html CSS：特殊流体布局问题_Html_Css

Html CSS：特殊流体布局问题

html css

Html CSS：特殊流体布局问题,html,css,Html,Css,请参阅所附图片。这是如何实现的？天哪，我已经使用CSS 8年了，但不知怎么的，我从来没有这样做过谢谢不久前，我在我的网站上实现了这一点，但我丢失了代码。下面是一个快速的CSS模型： HTML： <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test</title> </head>

请参阅所附图片。这是如何实现的？天哪，我已经使用CSS 8年了，但不知怎么的，我从来没有这样做过

谢谢

不久前，我在我的网站上实现了这一点，但我丢失了代码。下面是一个快速的CSS模型：

HTML：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
    </head>

    <body>
        <div id="left">
            Mr. Fixed-width left
        </div>

        <div id="right">
            Mr. Dynamic right. Scroll me!
        </div>
    </body>
</html>

这应该行得通，这是一个实时副本：

请注意，无论何时向左侧栏添加填充、边框、边距等，都必须增加正文上的填充。它将为您节省大量调试；）

祝你好运

我就是这样做的：

<style> 
  #container { margin-left: 250px; }
  #sidebar {
    display: inline; /* Fixes IE double-margin bug. */
    float: left;
    margin-left: -250px;
    width: 250px;
  }

  /* Definitions for example only: */
  #sidebar { background: #FF0000; }
  #content { background: #EEEEEE; }
  #sidebar, #content { height: 300px; }
</style>

<div id="container">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>


#容器{左边距：250px；}
#边栏{
display:inline；/*修复了IE的双边距错误*/
浮动：左；
左边距：-250px；
宽度：250px；
}
/*定义仅供示例：*/
#边栏{背景：#FF0000；}
#内容{背景：#EEEEEE；}
#边栏，#内容{高度：300px；}

随着内容框（右）的有机增长，这种新方法不会破坏布局。它还允许安全地将背景和边框应用于容器盒

.container {
    width: 100%;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.left {
    position: absolute;
    width: 80px;
    height: 100%;
}

.right {
    position: relative;
    left: 80px;
    top: 0;
    margin-right: 100px;
    height: 100%;
}

.container{
宽度：100%；
显示：表格；
}
.货柜组{
显示：表格单元格；
}
.侧边栏{
宽度：200px；
背景：灰色；
}


固定宽度边栏
动态内容

这是我能想到的最直接的解决方案

将父div中的两个元素包装为相对定位，然后绝对定位静态侧栏，并将响应div上的边距设置为与静态侧栏相同的宽度

HTML:

你是用百分比来表示你的大div吗？是的，我喜欢这个解决方案。

.container {
    width: 100%;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.left {
    position: absolute;
    width: 80px;
    height: 100%;
}

.right {
    position: relative;
    left: 80px;
    top: 0;
    margin-right: 100px;
    height: 100%;
}

    <div class="wrapper">

      <div class="fixed"></div>

      <div class="responsive">xx</div>

    </div>

  .wrapper {

    width: 100%;

  }

  .fixed {

    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;


  }

  .responsive {

    margin-left: 250px;

  }