За последние 24 часа нас посетили 18096 программистов и 1662 робота. Сейчас ищут 1534 программиста ...

Зафиксировать background вместе со скроллингом

Тема в разделе "HTML и CSS", создана пользователем xkant, 27 апр 2013.

  1. xkant

    xkant Новичок

    С нами с:
    21 апр 2013
    Сообщения:
    25
    Симпатии:
    0
    Когда происходит скролинг, красный фон(cleft) не скролится.
    Мне надо чтобы он был растянут на всю длину cright дива.

    Код (Text):
    1. html, body {height: 100%;}
    2.  
    3. <div class="cleft">текст 1</div>
    4. <div class="cright">много текста 2</div>
    5.  
    6. .cleft {float: left; min-height: 100%; width: 300px; background-color: red; background-repeat: repeat}
    7. .cright {margin-left: 310px; width: 400px;}
     
  2. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    А можно подробнее?
     
  3. xkant

    xkant Новичок

    С нами с:
    21 апр 2013
    Сообщения:
    25
    Симпатии:
    0
    Ну вот так
    [​IMG]

    А надо чтобы красный див был на всю длину вместе со скролом.
     
  4. xkant

    xkant Новичок

    С нами с:
    21 апр 2013
    Сообщения:
    25
    Симпатии:
    0
    Вот http://xkant.totalh.net

    Вот если идет прокрутка, то красный фон заканчивается. А мне надо чтобы он растягивался на всю высоту браузера.

    [​IMG]

    Код (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    4. <head>
    5.     <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    6.     <meta name="description" content="apple juice addict" />
    7.     <link rel="stylesheet" href="mask.css" type="text/css" />
    8.     <title>Пример</title>
    9. </head>
    10. <body>
    11.  
    12. <div class="cleft">
    13.        
    14. <div class="cbox">
    15. <p class="btext">Денежный поток</p>
    16. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    17. </div>
    18.  
    19. </div><!--cleft-->
    20.  
    21.  
    22. <div class="cright">
    23.        
    24. <div class="contenttext">
    25. <p class="btext">Денежный поток</p>
    26. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    27. </div>
    28.        
    29. <div class="contenttext">
    30. <p class="btext">Денежный поток</p>
    31. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    32. </div>
    33.        
    34. <div class="contenttext">
    35. <p class="btext">Денежный поток</p>
    36. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    37. </div>
    38.        
    39. <div class="contenttext">
    40. <p class="btext">Денежный поток</p>
    41. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    42. </div>
    43.        
    44. <div class="contenttext">
    45. <p class="btext">Денежный поток</p>
    46. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    47. </div>
    48.        
    49. <div class="contenttext">
    50. <p class="btext">Денежный поток</p>
    51. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    52. </div>
    53.        
    54. <div class="contenttext">
    55. <p class="btext">Денежный поток</p>
    56. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    57. </div>
    58.        
    59. <div class="contenttext">
    60. <p class="btext">Денежный поток</p>
    61. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    62. </div>
    63.        
    64. <div class="contenttext">
    65. <p class="btext">Денежный поток</p>
    66. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    67. </div>
    68.        
    69. <div class="contenttext">
    70. <p class="btext">Денежный поток</p>
    71. <p>Денежный поток - это движение денежных средств в реальном времени, по сути, денежный поток это разность между суммами поступлений и выплат денежных средств компании за определенный период времени, как за этот промежуток берется финансовый год. В основе управления денежными потоками лежит концепция денежного кругооборота. Например, деньги конвертируются в запасы, дебиторскую задолженность и обратно в деньги, замыкая цикл движения оборотного капитала компании. Когда денежный поток уменьшается или перекрывается полностью, возникает явление неплатежеспособности. Недостаток денежных средств предприятие может ощутить даже в том случае, если формально оно остается прибыльным (например, нарушаются сроки платежей клиентами компании). </p>
    72. </div>
    73.  
    74. </div><!--cright-->
    75.    
    76.    
    77. </body>
    78. </html>
    Код (Text):
    1. html, body {margin:0px; padding:0px; height: 100%;}
    2. * {margin:0px; padding:0px;}
    3. ul, li{margin:0px; padding:0px; }
    4.  
    5. p {font: 14px Verdana; color: #f1f1f1;}
    6. p.btext {font: 18px Verdana; #f1f1f1;}
    7. .contenttext p {color: #222222;}
    8.  
    9. .cleft {background-color: red; width: 300px; float:left; min-height: 100%; padding-right:10px; padding-top: 10px;  padding-bottom: 10px;}
    10. .cbox {text-align: right; padding-left: 10px; padding-top: 20px; float: right;}
    11. .cright {margin-left: 310px; width: 800px; padding: 10px;}
    12. .contenttext {padding-top: 20px;}
     
  5. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    вложи оба дива в один большой див, и у него сделай красный фон сбоку.
     
  6. xkant

    xkant Новичок

    С нами с:
    21 апр 2013
    Сообщения:
    25
    Симпатии:
    0
    Спасибо.