Question

我在这里遇到了一个有趣的小问题我试图根据窗口的动态大小来调整我的网站的单元格，而我可以轻松地设置主单元格以扩展内部单元格如果我简单地将它们设置为100或类似的话，就不会跟随它。

这是我的容器

#container {
  background-color: #063;
  width: 980px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  border-top-width: 1px;
  border-right-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-left-style: solid;
  border-top-color: #F60100;
  border-right-color: #F60100;
  border-bottom-color: #000000;
  border-left-color: #F60100;
  /* [disabled]opacity: .75; */
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

这很好但是在这里它变得棘手我有一组切片作为框架内容单元的一种书脊，它们是一个设定的大小，主体内容填充剩下的空间，但到目前为止，我必须设置容器和正文块与设定数字，因为简单的百分比赢得了工作

#Option1, #Option2, #Option3, #Option4, #Option5 {
  width: 73px;
  float: left;
  cursor: pointer;
}

#Option3 {
  width: 70px;
}

#Option4 {
  width: 90px;
}

#Option5 {
  width: 72px;
}

这些是静态刺，因此它们永远不会改变，至少目前不是因为高度是未来id中的静态值，比如这些可以缩放显示但首先我需要得到水平缩放工作

#Option1Div, #Option2Div, #Option3Div, #Option4Div, #Option5Div {
  width: 594px;
  float: left;
  height: 592px;
  background-color: #000;
  opacity: .9;
  color: #FFF;
  overflow: auto;
  padding: 4px;
  margin: 0px;
}

这是硬编码到容器中的正文内容 - 脊柱div尺寸我希望使用容器进行此缩放

根据请求我的HTML示例，我使用Javascript将内容框宽度从完全更改为0，这会创建一个框架打开以显示文本的效果，但即使默认的第一帧打开它它会尝试完整的宽度并没有考虑到刺

<div id="container">
  <div id="header">HEADER PICS</div>
  <div id="content">
    <div id="subsection1">LINKS SET 1</div>
    <div id="subsection2">LINKS SET 2</div>

    <div id="Option1"><img src="assets/Black_Spine.png" name="Option1" height="600" class="options" /></div><div id="Option1Div" class="option-divs">
       ContentBox1
    </div>
    <div id="Option2"><img src="assets/Blue_Spine.png" name="Option2" height="600" class="options" /></div><div id="Option2Div" class="option-divs">
       ContentBox2
    </div>
    <div id="Option3"><img src="assets/Pink_Spine.png" name="Option3" height="600" class="options" /></div><div id="Option3Div" class="option-divs">
        ContentBox3
    </div>
    <div id="Option4"><img src="assets/Red_Spine.png" name="Option4" height="600" class="options" /></div><div id="Option4Div" class="option-divs">
         ContentBox4
    </div>
    <div id="Option5"><img src="assets/Yellow_Spine.png" name="Option5" height="600" class="options" /></div><div id="Option5Div" class="option-divs">
        ContentBox5
    </div>
    <div class="breaker"></div>
  </div>
  <div id="footer">
    FOOTER LINKS 
      </div>
  </div>

好吧所以我想我已经弄明白了，我能够使用jQuery获取宽度，根据需要调整它并将其传递给CSS。主容器将根据需要调整大小，同时调整大小并在第一次加载时内容单元格将增长到适合窗口空间的大小但是我无法填充内容单元以适应调整大小。由于用户可能位于其中一个辅助单元格中，我认为最好先进行检查以查看内容单元格的宽度是否已经高于0，如果它只是调整它以匹配新值，但它不会＃39 ;似乎想要工作

$(window).resize(function () {
var pageWidth = $(window).width();
    pageWidth = pageWidth-90;
var contentWidth = pageWidth-$( '#Option1' ).width();
    contentWidth = contentWidth-$( '#Option2' ).width();
    contentWidth = contentWidth-$( '#Option3' ).width();
    contentWidth = contentWidth-$( '#Option4' ).width();
    contentWidth = contentWidth-$( '#Option5' ).width();
    contentWidth = contentWidth-10;
$('#container').css("width", pageWidth+"px");
if ($('#Option1Div').css('width').replace(/[^-d.]/g, '') > 0){
    $('#Option1Div').css("width", contentWidth+"px");
} else if ($('#Option2Div').css('width').replace(/[^-d.]/g, '') > 0){
    $('#Option2Div').css("width", contentWidth+"px");
} else if ($('#Option3Div').css('width').replace(/[^-d.]/g, '') > 0){
    $('#Option3Div').css("width", contentWidth+"px");
} else if ($('#Option4Div').css('width').replace(/[^-d.]/g, '') > 0){
    $('#Option4Div').css("width", contentWidth+"px");
} else if ($('#Option5Div').css('width').replace(/[^-d.]/g, '') > 0){
    $('#Option5Div').css("width", contentWidth+"px");
};

这里的参考是页面加载工作正常，所以它只是if else块

    var pageWidth = $(window).width();
    pageWidth = pageWidth-90;
    var contentWidth = pageWidth-$( '#Option1' ).width();
    contentWidth = contentWidth-$( '#Option2' ).width();
    contentWidth = contentWidth-$( '#Option3' ).width();
    contentWidth = contentWidth-$( '#Option4' ).width();
    contentWidth = contentWidth-$( '#Option5' ).width();
    contentWidth = contentWidth-10;
$('#container').css("width", pageWidth+"px");
$('#Option1Div').css("width", contentWidth+"px");
$('#Option2Div, #Option3Div, #Option4Div, #Option5Div').css("width", "0px");

Answer 1

难道你不能制作它们宽度：100％

或者你需要它们的百分比是多少？这基本上是用于流体网格的自举和基础。您有行和列，所有内容都基于其父容器的百分比。我会试一试，我想你会对结果感到满意。例如，如果你有：

<div id="parentContainer">
  <div id="childContainer">

  </div>
</div>

然后你的css看起来像这样：

#parentContainer {
  width:auto;
  height:auto;
}

#childContainer {
  width:100%;
}

鉴于此，childContainer将始终反映parentContainer的大小。因此，如果您动态更改父级，则将child设置为设置为父级的100％。您可以将其设置为您需要的任何％值。如果你需要动态调整高度，你可以做同样的事情。

对于上面的示例，我将高度和宽度设置为自动，但它可以是您设置的任何值。这是我提到的基金会网格的链接：http://foundation.zurb.com/grid.html 这是我提到的Bootstrap Grid的链接：http://getbootstrap.com/css/

根据主动态宽度动态调整CSS中的宽度

1 个答案: