Question

这是我一直试图获得的布局：

固定标题[高度为150像素] =＆GT;在标题内部，它在最右端有两个宽度为60px的文本框（一个在另一个下面）。

页眉和页脚之间的内容可以滚动。

粘性页脚[高度为50px]

所以，我遇到的问题是当我最小化屏幕时，没有启用右滚动。所以我无法进入标题右侧的文本框。

=＆GT;如果设置overflow-x：scroll，则右侧滚动会启用，但每个div都会获得一个滚动条，这会使页面看起来很糟糕。

有人可以帮我一个干净的方法吗？

我的代码是：

#Header {
  position: absolute;
  top: 0px; 
  left: 0px;
  height: 150px;
  width: 100%; 
}

// Spacing for the text box in right side, inside the header
#Right spacing {
  position: relative;
  left: 70%;
  height: 100%;
}

// Input box of 60px width
.input {
   width: 60px;
   margin-top: 6px;
   border: 1px solid #999;
   padding: 10px;
   color: #999;
}

// Right spaced content in between header and footer
#Content {
   margin: 0px 40px 0px auto;
   min-height: 100%
   position: absolute;
   padding-top: 150px;
   width: 300px;
   right: 60px;
   height: 100%;
}

#Footer {
  position: fixed;
  bottom: 0px; 
  height: 50px;
  left: 0px;
  width: 100%; 
}

感谢您的帮助。

Answer 1

这是一个简单的脚本，当调整窗口大小时，您可以使用它作为触发器来更改元素的属性，例如标题宽度，div宽度等等。

window.onresize = function(event) {

    var newWidth = $(window).width();
    $('#header').css({'width': newWidth });

}

粘页眉页脚，需要可滚动内容（水平+垂直）

1 个答案: