CSS: Special Fluid Layout Problems

前端未结

关注

 5  719

情话喂你

$\"alt$

See attached image. How is this accomplished? Gosh, I\'ve been going CSS for 8 years but somehow n

相关标签:

5条回答

庸人自扰

2021-01-19 02:41

You can always use table display layouts (sigh).

.container {
  width: 100%;
  display: table;
}
.container div {
  display: table-cell;
}
.sidebar {
  width: 200px;
  background: gray;
}

<div class="container">
  <div class="sidebar">fixed width sidebar</div>
  <div>dynamic content</div>
</div>

0 讨论(0)

慢半拍i

2021-01-19 02:50

This new approach doesn't break the layout as the content box (right) organically grows. Also it allows to safely apply backgrounds and borders to the container box.

.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%;
}

See demo.

0 讨论(0)

一个人的身影

2021-01-19 02:56

This is how I do it:

<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>

Example here

0 讨论(0)

隐瞒了意图╮

2021-01-19 02:56

I had this implemented on my site a while back, but I lost the code. Here's a quick CSS mockup:

The 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>

And here's the CSS:

body
{
    padding-left: 230px;
}

#left
{
    position: fixed;
    height: 100%;
    left: 0px;
    top: 0px;
    width: 200px;

    background-color: rgb(150, 150, 150);
    border-right: 5px solid rgb(50, 50, 50);

    padding: 10px;
}

#right
{    
    width: 100%;
    height: 10000px;
}

This should work, and here's a live copy: http://jsfiddle.net/dDZvR/12/.

Note that whenever you add padding, borders, margins, etc. to the left bar, you have to increase the padding on the body. It'll save you a ton of debugging ;)

Good luck!

0 讨论(0)

感情败类

2021-01-19 03:00
This is the most straight forward solution I could think of.

Wrap both elements in a parent div set to relative positioning, then absolutely position the static side bar and set a margin on the responsive div the same width as the static sidebar.

HTML:
```
    <div class="wrapper">

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

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

    </div>
```
CSS:
```
  .wrapper {

    width: 100%;

  }

  .fixed {

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


  }

  .responsive {

    margin-left: 250px;

  }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...