Question

我创建了一个使用Flare的文档页面，强制面包屑保持固定在顶部导航下方。页面工作原样，但我希望div跨页面延伸。请参阅下面的当前设计：

如果删除子div中的min-width，我可以将div拉伸到100％，但它只向右延伸，同时将面包屑保持在我想要的位置。示例如下：

或者我可以通过在父div上添加left:0;来使其伸展100％，但随后面包屑移动到位。我可以使用margin-right或right将div定位到所需区域，但在调整浏览器大小时div不会与其他内容同步。

Answer 1

试试这个：

*{ 
  padding:10px;
}
.parent {
  margin:auto;
  width:300px;
  background-color:red;
}
.breadcrums {
  background-color:blue;
}
.full-width {
  background-color: green;
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
}

<div class="parent">
    <div class="breadcrums">breadcrums</div>
    <div class="full-width">full-width element</div>
</div>

此处的重要部分是position上的width，left，transform和.full-width。

Answer 2

应用css＆＃34;离开＆＃34;财产，如果该div有＆＃34;绝对＆＃34;位置。

Answer 3

感谢您的回复。这是html和css：

HTML：

<div class="crumbs_wrapper">
 <div class="MCBreadcrumbsBox" >
  <span class="MCBreadcrumbsPrefix">You are here:</span>
  <a href="" class="MCBreadcrumbsLink">B1</a>
  <span class="MCBreadcrumbsDivider"> B2 </span>
  <a  href=""class="MCBreadcrumbsLink">B3</a>...
 </div>
</div>

CSS：

div.crumbs_wrapper
{  
 position: fixed;
    float: none;
    width: 100%;
    z-index: 1;
}

div.MCBreadcrumbsBox{
padding-bottom: 5px !important;
    padding-top: 18px !important;
    padding-left: 10px !important;
    float: left;
    position: relative;
    margin-top: -12px;
    background-color: #FFF;
    z-index: 999;
    width: 100%;
    max-width: 104.5em;
    box-shadow: 1.5px 1.5px 15px #888888;
}

我使用的工具是Flare，它没有固定的面包屑功能。面包屑是自动生成的;我只更改了CSS值，并在.crumbs_wrapper类中添加了一个额外的div。其他类由软件自动生成。

如果我删除max-width div仅向右延伸，如果我将left: 0;添加到父div，则面包屑向左移动。我可以使用margin将面包屑带到我想要的位置，但是在调整浏览器大小时它不会保持固定。此外，填充和边缘顶部用于将面包屑保持在顶部导航下方并与内容的其余部分对齐。

Div只向一个方向伸展

3 个答案: