问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

网页如何实现这种布局？

头像
boomler
    55521320

    图片描述

    我想达到下面所述的效果

    • 页面分两大块儿，①所指的div宽度固定，高度不固定，居中

    • ②所指的div要紧贴着①；并且不随着页面的滚动而滚动【或者说②处于浏览器窗口固定的位置】；

    我所不能解决的问题

    • 如果对②使用position：fixed，那么当浏览器窗口不固定的时候，如何才能让它紧贴着①；
      或者说②的left或right属性怎么取值？

    • 有想过浏览器窗口宽度发生变化时，用js去调整②的left或right取值。。。

    大家有什么技巧来实现这种效果吗

    htmlcssjavascript
    阅读 2.6k
    4 个回答
    得票最新
    头像
    aldst
      7927
      <style type="text/css">
    *{ margin:0; padding:0; }
    div{ width:1000px; height:auto; background:green; margin:0 auto; position:relative; }
    h1{ width:100%; height:200px; }
    p{ width:200px; height:200px; background:red;  position:fixed; left:50%; top:50%; margin:-100px 0 0 500px; }
</style>
</head>

<body>
<div>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
</div>
<p></p>

      不知道你要是不是这样，如果你的整体宽度大于1366的话，可能你就要缩小中心的那个板块宽度，那么久需要用一点JS （还有就是fixed 兼容到IE7， 如果你要兼容到IE6就需要用js编辑右边的板块在保持在在右边了）

      头像
      JustGo
        3.5k1615

        把 2 放到 1 中，用定位使其位置溢出到 1 右边。

        头像
        hook_life
          4613614

          我觉得应该只能用js去解决了
          jquery的代码如下

          
//监视窗口大小变动事件
$(window).resize(function (){
    var ①=$("①")
    var ①offset=①.offset();
    //用元素距离左面的像素+元素本身的宽度
    var ②left=①offset.left+①.outerWidth()
    $("②").css('left',②left)
})
//在页面加载完毕之后手动执行一下reszie事件
$(window).trigger('resize')
          头像
          elliot_huang
            2
            新手上路，请多包涵

            (楼上正解)如果不考虑兼容性，还可以这样：

            HTML

            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <div class="main"></div>
  <div class="aside"></div>
</body>
</html>

            SCSS

            $mainWidth: 240px;
$asideWidth: 100px;

html,body {
  margin: 0;
  box-sizing: border-box;
}

.main {
  margin: 20px auto;
  width: $mainWidth;
  height: 4000px;
  border: 1px solid #333;
}

.aside {
  position: fixed;
  top: 200px;
  right: 0;
  left: 0;
  margin: auto;
  width: $asideWidth;
  height: 100px;
  border: 1px solid #333;
  transform: translateX(($mainWidth+$asideWidth)*.5+10px);
}

            结果展示：
            http://codepen.io/huangxutao/pen/VjawEO/

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题