только верхняя граница DIV отображаются

-2

У меня есть три Див и попытаться нарисовать границу на каждых делах. Но это только показывает границу в верхней части div`s, как вы можете видеть here.только верхняя граница DIV отображаются

Это мой код:

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 

      .mydiv 
      { 
       position: relative; 
       border:1px solid yellow; 
      } 


      .mydiv_content 
      { 
       position: absolute; 
       border:1px solid red; 
      } 

      .mydiv_buttons 
      { 
       position: absolute; 
       border:1px solid green;  /* D8D8D8 */ 
      } 

     </style> 
    </head> 
    <body> 
     <div class="mydiv"> 
      <div class="mydiv_content"> 
       <p> TEST 1</p> 
      </div> 

      <div class="mydiv_buttons"> 
       <br> 
       <input type="submit" value="send"></input> 
      </div> 
     </div> 
    </body> 
</html>

Я не знаю, почему это только показывает границу в верхней части, было бы здорово, если бы кто-то может объяснить мне это. Вы можете найти полный код на jsfiddle.

источник

2015-10-02 Black

http://jsfiddle.net/k6bwy8hg/2/ – akash

Почему? Потому что у него нет высоты. – Nick

@Nick, неверно, полный код находится на jsfiddle, мне не разрешалось публиковать весь код. http://jsfiddle.net/k6bwy8hg/1/ – Black

Это потому, что вы настраиваете height с % по отношению к родителю div, который position:absolute и не имеет height определено, потому что ваш не используете на нем height:800%;, что не оказывает влияния из-за position собственности.

Просто определить height родителя в px:

.mydiv 
{ 
    position: relative; 
    border:1px solid yellow; /* D8D8D8 */ 
    width:70%; 
    height:800px; // define the height 
    margin-top: 100px; 
    margin-left: 200px; 
}

источник

2015-10-02 08:13:49 KAD

хорошо расширяется !! – akash

Спасибо, это мне очень помогло. – Black

Добро пожаловать, чувак :) – KAD

Вашего .mydiv элемент не получает надлежащего Height

.mydiv { 
    position: relative; 
    border: 1px solid yellow; 
    width: 70%; 
    height: 80px; //added 
    margin-top: 100px; 
    margin-left: 200px; 
}

Working Demo

источник

2015-10-02 08:11:05 akash

Попробуйте изменить весь ваш класс position:absolute; в position:relative;. Или удалите position:absolute в дочернем div.

Попробуйте избавиться от высоты ребенка Див. Так что не будет огромного пространства в родительском div.

Пример смотрите на моей демо.

Мои Demo

источник

2015-10-02 08:13:48 Fiido93

только верхняя граница DIV отображаются

ответ

Смежные вопросы