growing box dont work_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-27 17:31 出处：网络

I like the left box to grow as the content to the right expand the whole wrapper... i mean vertical scaling....开发者_运维技巧 not horizontal !

相关专题：css

I like the left box to grow as the content to the right expand the whole wrapper... i mean vertical scaling....开发者_运维技巧 not horizontal !

reference page

i'm sure it's only a matter of css propriety somewhere... can you help ?

Try to avoid floats, floats are for images and text. People often use floats where absolute positioning is far more appropriate.

Basically what you do is add a margin to your right pane that is about as wide as your left pane. Then absolute position your left pane on top of the right pane and set the height to 100% so it is as high as the container. the container will have the same height as the content.

Here's a sample for you:

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      body { width: 800px; margin: 0px auto; position: relative; }

      #nav { 
        width: 200px; height: 100%; 
        position: absolute; left: 0px; top 0px; 
        background: #F00; 
      }

      #content { 
        margin: 0px 0px 0px 200px; 
        heigth: 1000px;
        background: #0F0; 
      }
    </style>
  </head>
  <body>
    <div id="nav">
    </div>
    <div id="content">
    </div>
  </body>
</html>

You're possibly looking for a "fluid column layout" (Google that), and you can achieve this most simply by arranging your markup something like this:

<ul style="float:left; width:35%;">
  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li><a href="">Link 3</a></li>
</ul>
<div style="float:left; width:65%;">
  <p>Lots of content goes here</p>
</div>

As the width of the whole page grows (like by resizing your browser) both 'columns' stretch to meet their width requirements of 35% and 65%. The above is a quick example markup, which does not take into account Internet Explorers, Default padding/margin on elements, or float clearance, and ideally any styles on your two columns would be set via a 'class', ie; <div class="column-a">, and all classes defined in an external CSS file.

Let me know if you want me to elaborate.

Edit: Ok, so you want the left column to have its background colour stretch to the bottom, giving the visual effect of 'equal height columns'? If that's the case this link is great and should cover everything you need to know and try.