Высота <div>

ghrd · May 30, 2012

есть несколько страниц с разным объемом содержимого в div.content.

ниже идет div.footer

как закрепить высоту первого блока?

Modestes · May 30, 2012

прописать в стилях этого блока нужную вам высоту. height: ***px;

ghrd · May 31, 2012

On 5/30/2012 at 2:06 PM, Modestes said:
прописать в стилях этого блока нужную вам высоту. height: ***px;

не помогает

Modestes · May 31, 2012

код или ссылку

ghrd · May 31, 2012

On 5/31/2012 at 7:23 AM, Modestes said:
код или ссылку

html, body {
	background: #ccc url(/images/img/bg.png) repeat;
	color: #7b7b7b;
	font-family: Trebuchet MS;
	text-shadow: 1px 2px 3px #fff;  
	padding: 40px;
}

body:before  { 
    content: ""; 
    position: fixed; 
    top: -10px; 
    left: -10px; 
    width: 110%; 
    height: 10px;  
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 
    -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 
    -o-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
    z-index: 100; 
}

a {
    color: #690;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 2px 3px #fff;  
}

h1 {
    color: #690;
	font-size: 24px;
	margin: 0px;
}

h2, h2 a {
    color: #ccc;
	font-size: 18px;
	margin: 0px;
}

h3, h3 a {
    color: #690;
	font-size: 14px;
	margin: 0px;
}

.container {
    width: 620px;
    overflow: hidden;
	margin: 0 auto;
}

.header {
    width: 620px;
    color: #690;
	font-size: 16px;
    font-weight: bold;
    font-style: italic;
    text-align: left;
	text-shadow: 1px 2px 3px #fff;
}

.menu {
    width: 620px;
    margin: 30px;
    color: #ccc;
	font-style: italic;
    text-align: right;
    text-shadow: 1px 2px 3px #fff;
}

.posts {
    width: 620px;
    height: 700px;
}

.footer {
    width: 620px;
	color: #ccc;
	font-size: 20px;
	text-align: center;
	text-shadow: 0px 2px 3px #fff;
}

.button {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-spacing: 0;
	list-style: none;
	text-align: left;
	font-size: 100%;
    font-style: normal;
	font-weight: normal;
	content: '';
	overflow: auto;
	resize: none;
}

Cerberus · May 31, 2012

Класса content не видно в таблице стилей.

Возможно Вы сделали опечатку и имели ввиду

.container {
    width: 620px;
    overflow: hidden;
        margin: 0 auto;
}

Тогда пропишите у него высоту.

Или поставьте min-height

Да, кстати, overflow может сыграть с Вами злую шутку :-)

Edited May 31, 2012 by Cerberus

ghrd · May 31, 2012

класс контент это пример. в данном css это .posts

Cerberus · May 31, 2012

Тогда надо увидеть HTML

Или дайте ссылку на страницу.

ghrd · May 31, 2012



<?xml version="1.0" encoding="utf-8"?>
  <xsl:stylesheet version="1.0" 
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:umi="http://www.umi-cms.ru/TR/umi">
      <xsl:output encoding="utf-8" method="html" />
        <xsl:include href="news.xsl" />
          <xsl:template match="/">

<head>
  <title><xsl:value-of select="/result/@title" /></title>
    <meta name="description" content="{/result/meta/description}" />
    <meta name="keywords" content="{/result/meta/keywords}" />
      <link href="http://umi:10001/images/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
      <link href="/css/style.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="/css/default.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script src="/js/jquery/jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>

</head>

<body>

    <div>
    <!-- twi -->
    <script>
      !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0];
      if(!d.getElementById(id)){js=d.createElement(s);
      js.id=id;js.src="//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js,fjs);
      }}(document,"script","twitter-wjs");
    </script>

    <!-- g+ -->
    <script type="text/javascript">
      window.___gcfg = {lang: 'ru'};
      (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>

    <!-- fb -->
    <div id="fb-root"></div>
    <script>
      (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
    </div>

<div class="container">

  <div class="header">
    <a href="/"><img src="http://umi:10001/images/img/title.png" align="left"  />
    <h1>...</h1></a>
    +7 (900) 000 00 00
    <br /><a href="mailto:ask@mail.ru">ask@mail.ru</a>
  </div>

  <div class="menu">
    <h2><xsl:apply-templates select="document('udata://content/menu')/udata" /></h2>  
  </div>

  <div class=".posts">
    <xsl:apply-templates select="result"/>
  </div>

  <div class="footer"> 
    <div class="button">
      <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
      <script type="IN/Share" data-counter="right"></script>

      <div class="g-plusone" data-size="medium"></div>

      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://dasdf.ru" data-lang="en">Tweet</a>

      <div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
    </div>
  </div>

</div>

</body>

</xsl:template>

<xsl:template match="item">
  <a href="{@link}"><xsl:value-of select="." />     </a>
</xsl:template>

<xsl:template match="result[@module='content'][@method='content']">
  <xsl:value-of select=".//property[@name = 'content']/value" disable-output-escaping="yes" />
  <p />
</xsl:template>

<xsl:template match="result[page/@is-default='1']">

  <div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
      <img src="images/img/slider/toystory.jpg" alt="" title="1" />
      <img src="images/img/slider/up.jpg" alt="" title="2" />
      <img src="images/img/slider/walle.jpg" alt="" title="3" />
      <img src="images/img/slider/nemo.jpg" alt="" title="4" />
    </div>
  </div>

  <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="/js/jquery/jquery.nivo.slider.pack.js"></script>
  <script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider();
    });
  </script>

</xsl:template>

</xsl:stylesheet>

Edited May 31, 2012 by ghrd

Pasha · May 31, 2012

В html, в блоке с классом posts пишите имя класса без точки: class="posts"

ghrd · May 31, 2012

On 5/31/2012 at 11:42 AM, Pasha said:
В html, в блоке с классом posts пишите имя класса без точки: class="posts"

вот так опечатка. спасибо

исходя из этого возникает вопрос. как выйти из ситуации, когда содержимое контента превышает установленную высоту класса

Modestes · May 31, 2012

On 5/31/2012 at 12:33 PM, ghrd said:
исходя из этого возникает вопрос. как выйти из ситуации, когда содержимое контента превышает установленную высоту класса

overflow

ghrd · May 31, 2012

On 5/31/2012 at 12:40 PM, Modestes said:

On 5/31/2012 at 12:33 PM, ghrd said:
исходя из этого возникает вопрос. как выйти из ситуации, когда содержимое контента превышает установленную высоту класса
overflow

оверфло ведь управляет отображением содержания элемента.

даже убрав это свойство содержимое подвала остается на указанной высоте, поверх контента

Modestes · May 31, 2012

тогда поясняйте что должно произойти при превышении

ghrd · June 1, 2012

On 5/31/2012 at 7:17 PM, Modestes said:
тогда поясняйте что должно произойти при превышении

колонка должна растягиватсья

a.antropov · June 1, 2012

On 6/1/2012 at 7:43 AM, ghrd said:

On 5/31/2012 at 7:17 PM, Modestes said:
тогда поясняйте что должно произойти при превышении
колонка должна растягиватсья

используйте "min-height" вместо "height"

ghrd · June 1, 2012

On 6/1/2012 at 7:45 AM, a.antropov said:

On 6/1/2012 at 7:43 AM, ghrd said:

On 5/31/2012 at 7:17 PM, Modestes said:
тогда поясняйте что должно произойти при превышении
колонка должна растягиватсья
используйте "min-height" вместо "height"

целую ручки

Cerberus · June 1, 2012

Я Вам сразу советовал применить min-height.

Но не забывайте, что IE этот параметр не понимает.

Я Вам сразу советовал применить min-height.

Но не забывайте, что IE этот параметр не понимает.

ghrd · June 1, 2012

On 6/1/2012 at 10:40 AM, Cerberus said:
Я Вам сразу советовал применить min-height.
Но не забывайте, что IE этот параметр не понимает.
Я Вам сразу советовал применить min-height.
Но не забывайте, что IE этот параметр не понимает.

по моим каскадам стилей и иксэсэлькам можно заметить, что я не внимателен.

приношу свои извинения, целую ручки и вам.

a.antropov · June 2, 2012

On 6/1/2012 at 10:40 AM, Cerberus said:
Но не забывайте, что IE этот параметр не понимает.

Понимает, ie7 +, а за ie6 можно уже не ухаживать =)

Vin · June 2, 2012

a.antropov said:

Cerberus said:
Но не забывайте, что IE этот параметр не понимает.
Понимает, ie7 +, а за ie6 можно уже не ухаживать =)

Меня жутко умиляют разговоры про какой-то абстрактный IE, без указания версии.

Sign In

Высота <div>

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information