Сделать Div 100% Неизвестного размера?

У меня есть коробка с надписью «Test». Я хочу сделать ширину 100% от содержащего div. im не уверен, как это сделать? В jsFiddle ниже показано, что я хочу сделать. Я также не хочу использовать Javascript.Сделать Div 100% Неизвестного размера?

JsFiddle: http://jsfiddle.net/a6ZCR/3/

Вот код:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sample Page</title> 
    <link rel="stylesheet" href="Assets/CSS/Global/Global.css" /> 
</head> 
<body> 
<div id="Wrapper"> 
    <div id="Header"> 
     <div id="HeaderInner"> 
      <a href="#" class="HeaderLink Main">Link</a> 
      <a href="#" class="HeaderLink Main">Link</a> 
      <a href="#" class="HeaderLink Main">Link</a> 
      <a href="#" class="HeaderLink Main">Link</a> 

      <a href="#" class="HeaderLink Side">Log In</a> 
      <a href="#" class="HeaderLink Side">Register</a> 
     </div> 
    </div> 

    <div id="Menu"> 

    </div> 

    <div id="Body"> 
     <div id="BodyPadding"> 
      <div class="BasicBox"> 
       Test 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

CSS:

/* Layout */ 
html, body, #Wrapper { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #F4F4F4; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 15px; 
} 

#Header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    display: block; 
    width: 100%; 
    min-width: 965px; 
    height: 50px; 
    background-color: #333; 
    z-index: 1000; 
} 

#HeaderInner { 
    display: block; 
    width: 965px; 
    height: 50px; 
    margin: 0 auto; 
    padding: 0; 
} 

#Content { 
    position: absolute; 
    top: 50px; 
    left: 0; 
    display: block; 
    width: 100%; 
    min-width: 965px; 
    height: 100%; 
} 

#Menu { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    width: 220px; 
    height: auto; 
    min-height: 100%; 
    background-color: #FFF; 
    border-right: 1px solid #DDD; 
} 

#Body { 
    position: absolute; 
    top: 50px; 
    left: 220px; 
    width: auto; 
    height: auto; 
    min-height: 100%; 
} 

#BodyPadding { 
    padding: 30px; 
} 
/* Layout End */ 

/* Links */ 
.HeaderLink.Main { 
    float: left; 
    margin: 0; 
    padding: 0 35px; 
    color: #E1E1E1; 
    text-align: center; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 50px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    transition: color .2s ease-in-out; 
    -moz-transition: color .2s ease-in-out; 
    -webkit-transition: color .2s ease-in-out; 
} 

.HeaderLink.Main:hover { 
    color: #FFF; 
    border-top: 4px solid #DC3522; 
    line-height: 43px; 
} 

.HeaderLink.Side { 
    float: right; 
    margin: 0; 
    padding: 0 20px; 
    color: #E1E1E1; 
    text-align: center; 
    text-decoration: none; 
    line-height: 50px; 
    transition: color .2s ease-in-out; 
    -moz-transition: color .2s ease-in-out; 
    -webkit-transition: color .2s ease-in-out; 
} 

.HeaderLink.Side:hover { 
    color: #FFF; 
} 
/* Links End */ 

/* Objects */ 
.BasicBox { 
    width: 100%; 
    height: auto; 
    margin: 0; 
    padding: 20px; 
    background-color: #FFF; 
    border-bottom: 4px solid #DDD; 
} 
/* Objects End */

источник

2013-05-28 Moussa Harajli

div s - это 100% от ширины их содержащего контекстного элемента, если вы не сделали что-то, чтобы изменить его.

Ваша проблема в том, что содержащий элемент контекста #Body, который абсолютно позиционируется, и это удаляет его из обычного потока страниц и делает его настолько широким, насколько его содержимое. Таким образом, ваша 100-процентная ширина на .BasicBox составляет 100% от автоматического на абсолютно позиционированном элементе.

Итак, #Body - это то, что вам нужно сделать так широко, насколько вам это нужно.

источник

2013-05-28 23:45:05 Klors

как я могу сделать «Test» окно в широкой как #Body динамически без какой-либо определенной ширины, по причине того, потому что я не знаю, насколько большой #body div есть. это страница с несколькими мониторами. он настраивается на разрешение. –

Тест уже шире, чем '# Body'. Вы имеете в виду, что хотите, чтобы '# Body' был шире и заполнял правую сторону? – Klors

Да, это то, что я имел в виду, левое меню div 220px, и я хочу, чтобы другое оставшееся пространство справа заполнялось #body div –

.BasicBox { 
    display:block; 
    width: 100%; 
}

Прямо сейчас у вас есть padding: 20px. Если вы хотите .BasicBox, чтобы заполнить его контейнер, отступы отбрасывают его. Я бы установил дополнение к 0.

источник

2013-05-28 23:45:01

Вот рабочая скрипка, не заданная ширина, просто авто или 100%, чистый CSS. Мне не пришлось сильно менятьсяhttp://jsfiddle.net/shayl/a6ZCR/4/

Первое, что я заметил, это то, что #Body получал только ширину содержимого, потому что ширина была установлена в auto, что означает, что ширина была равна размеру слово «тест», а не его родительский контейнер.

#Body { 
    position: absolute; 
    top: 50px; 
    left: 220px; 
    width: auto; 
    height: auto; 
    min-height: 100%; 
}

Так что я изменил его ширина 100%, чтобы установить, что

#Body { 
    position: absolute; 
    top: 50px; 
    left: 220px; 
    width: 100%; 
    height: 100%; 
    min-height: 100%; 
}

Тогда я сделал то же самое с BodyPadding, потому что он не имеет ширину и высоту

#BodyPadding { 
    padding: 30px; 
    width:100%; 
    height:100%; 
}

И, наконец, я изменил «авто» на «наследовать» на этом теге, чтобы получить высоты от своих родителей:

.BasicBox { 
    width: inherit; 
    height: inherit; 
    margin: 0; 
    padding: 20px; 
    background-color: #FFF; 
    border-bottom: 4px solid #DDD; 
}

Вот весь рабочий CSS:

  /* Layout */ 
      html, body, #Wrapper { 
       margin: 0; 
       padding: 0; 
       width: 100%; 
       min-width: 1000px; 
       height: 100%; 
       background-color: #F4F4F4; 
       font-family: Arial, Helvetica, sans-serif; 
       font-size: 15px; 
      } 
      #Header { 
       position: fixed; 
       top: 0; 
       left: 0; 
       display: block; 
       width: 100%; 
       min-width: 965px; 
       height: 50px; 
       background-color: #333; 
       z-index: 1000; 
      } 
      #HeaderInner { 
       display: block; 
       width: 965px; 
       height: 50px; 
       margin: 0 auto; 
       padding: 0; 
      } 
      #Content { 
       position: absolute; 
       top: 50px; 
       left: 0; 
       display: block; 
       width: 100%; 
       min-width: 965px; 
       height: 100%; 
      } 
      #Menu { 
       position: fixed; 
       top: 50px; 
       left: 0; 
       width: 220px; 
       height: auto; 
       min-height: 100%; 
       background-color: #FFF; 
       border-right: 1px solid #DDD; 
      } 
      #Body { 
       position: absolute; 
       top: 50px; 
       left: 220px; 
       width: 100%; 
       height: 100%; 
       min-height: 100%; 
      } 
      #BodyPadding { 
       padding: 30px; 
       width:100%; 
       height:100%; 
      } 
      /* Layout End */ 

      /* Links */ 
      .HeaderLink.Main { 
       float: left; 
       margin: 0; 
       padding: 0 35px; 
       color: #E1E1E1; 
       text-align: center; 
       font-weight: bold; 
       text-decoration: none; 
       line-height: 50px; 
       box-sizing: border-box; 
       -moz-box-sizing: border-box; 
       -webkit-box-sizing: border-box; 
       transition: color .2s ease-in-out; 
       -moz-transition: color .2s ease-in-out; 
       -webkit-transition: color .2s ease-in-out; 
      } 
      .HeaderLink.Main:hover { 
       color: #FFF; 
       border-top: 4px solid #DC3522; 
       line-height: 43px; 
      } 
      .HeaderLink.Side { 
       float: right; 
       margin: 0; 
       padding: 0 20px; 
       color: #E1E1E1; 
       text-align: center; 
       text-decoration: none; 
       line-height: 50px; 
       transition: color .2s ease-in-out; 
       -moz-transition: color .2s ease-in-out; 
       -webkit-transition: color .2s ease-in-out; 
      } 
      .HeaderLink.Side:hover { 
       color: #FFF; 
      } 
      /* Links End */ 

      /* Objects */ 
      .BasicBox { 
       width: inherit; 
       height: inherit; 
       margin: 0; 
       padding: 20px; 
       background-color: #FFF; 
       border-bottom: 4px solid #DDD; 
      } 
      /* Objects End */

источник

2013-05-28 23:45:39

Пожалуйста, объясните изменения и почему они имеют значение. Это сделает этот ответ более полезным. – user2246674

уверен, что я немного обновлюсь здесь –

Сделать Div 100% Неизвестного размера?

ответ

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