CSS: сделать так, чтобы только один div соответствовал размеру экрана

#html #css

#HTML #css

Вопрос:

У меня есть следующий css.

 #lll
{
  float:left;
  max-width:1000px;
  border:1px solid;
}

#rrr
{
  float:left;
  width:300px;
  border:1px solid;
}

ul
{
  list-style:none;
}

li
{
  float:left;
  width:300px;
}

И мой HTML выглядит следующим образом

 <div id="lll">
  Hello

  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

<div id="rrr">
  right!
</div>

JSFiddle здесь http://jsfiddle.net/SN674/1 /

Теперь, что я хотел бы сделать, так это то, что при изменении размера окна я хотел бы, чтобы div # lll был изменен, но div # rrr оставался с правой стороны.

Прямо сейчас, если я изменю размер окна, div #rrr появится НИЖЕ div #lll.

Как я могу этого добиться?

1. не получил ваш вопрос. Div #rr помещается под div #lll … поэтому, если вы измените размер, он все равно останется только ниже div #lll … и если вы хотите, чтобы он был справа при изменении размера .. измените css #rrr { float:right; ширина: 300 пикселей; граница: 1 пиксель сплошная; }

2. @suraj, из того, что я вижу, изначально div #rrr размещается с правой стороны, А НЕ под #lll. Может быть, ваш экран уже маленький?

Ответ №1:

Вот как я бы сделал это в CSS:

http://jsfiddle.net/SN674/12/

 <style type="text/css">
#lll
{
        position: relative;
        margin-right: 305px;
        max-width:600px;
        min-width: 40px;
        border:1px solid;
 }

ul
{
    list-style:none;        
}
li
{
    width:300px;
}

#rrr
{
    position:absolute;
    right: -302px;
    top: -1px;
    width:300px;
    border:1px solid;
}    
</style>
<div id="lll">
    Hello

    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
    <div id="rrr">
        Whatever
    </div>
</div>

Вот один из способов в jQuery (как я бы это сделал):

Короткий ответ: http://jsfiddle.net/SN674/4 /

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>        
<script type="text/javascript">
           $(function(){

               $("div#lll").width($(document).width() - 350);
               $(window).resize(function(){
                   $("div#lll").width($(document).width() - 350);
               });
           });
       </script>
<div id="lll">
   Hello    
   <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
   </ul>
</div>
<div id="rrr">
   Whatever
</div>

Подробный ответ:
Шаг 1.
Скачать jQuery

Шаг 2. Прочитайте это: http://api.jquery.com/width / http://api.jquery.com/resize/

шаг 3. Проверьте этот пример, который я сделал:

 <html>

<head>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        div {
            float: left;
            width: 300px;
        }
        #solid {
            background-color: yellow;
        }
        #liquid{
            background-color: navy;
        }

    </style>
    <title>
        test
    </title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){

            $("div#liquid").width($(document).width() - 301);
            $(window).resize(function(){
                $("div#liquid").width($(document).width() - 301);
            });
        });
    </script>
</head>

<body>
    <div id="liquid">
        amp;nbsp;
    </div>
    <div id="solid">
        amp;nbsp;
    </div>
</body>
</html>

Я надеюсь, что это решит проблему для вас

1. не могли бы вы сделать это с помощью чистого css и html?

2. очень полезно! но, как говорится в комментарии, возможно ли это с помощью css?

3. Я отредактировал ответ, чтобы подробнее рассказать о том, как вы могли бы сделать это в css.

4. Также он не должен быть 350, если вы установите * margin и padding равными 0, вы можете уменьшить его до 301 (или немного больше с границами).

Ответ №2:

Я сделал его эластичным, используя проценты, хотя это может быть не то, что вы хотите. Проверьте это.

Ответ №3:

Вам просто нужно немного изменить свой CSS:

 body { margin:0px;}
div {margin:0px;}

    #lll{
      float:left;
      margin-right:300px;
      border:1px solid;
    }

    #rrr{
      position:absolute; right:0px; top:0px;
      width:300px;
      border:1px solid;
    }

    ul{  list-style:none;}
    li{  float:left;  width:300px; }

Хотя это не будет работать с IE6 и IE7. Для совместимости с IE6 и IE7, я думаю, нам нужны некоторые скрипты.