Высота <div>

ghrd · May 30, 2012

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

ниже идет div.footer

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

Modestes · May 30, 2012

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

ghrd · May 31, 2012

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

не помогает

Modestes · May 31, 2012

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

ghrd · May 31, 2012

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

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

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

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

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

Modestes · May 31, 2012

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

overflow

ghrd · May 31, 2012

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

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

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

Modestes · May 31, 2012

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

ghrd · June 1, 2012

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

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

a.antropov · June 1, 2012

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

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

ghrd · June 1, 2012

тогда поясняйте что должно произойти при превышении
колонка должна растягиватсья
используйте "min-height" вместо "height"

целую ручки

Cerberus · June 1, 2012

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

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

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

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

ghrd · June 1, 2012

Я Вам сразу советовал применить min-height.
Но не забывайте, что IE этот параметр не понимает.
Я Вам сразу советовал применить min-height.
Но не забывайте, что IE этот параметр не понимает.

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

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

a.antropov · June 2, 2012

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

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

Vin · June 2, 2012

Но не забывайте, что 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