Получение таблицы для заполнения 100% высоты в тд - PullRequest
4 голосов
/ 26 марта 2012

Я пытаюсь переписать сайт в правильном HTML.Сайт, который я пытаюсь заменить, был полным беспорядком.Я столкнулся с проблемой, когда я не могу получить <table> для заполнения высоты <td>, в которой он содержится. Я попытался установить height: 100% для <table>, который основан на google и stackoverflowисследования должны работать, но я, должно быть, упускаю что-то глупое.Я пытался сделать то же самое с <divs> перед переключением на таблицы, но я не против вернуться к <divs>, если кто-то может подсказать, как это сделать.

Содержимое, которое ясейчас идет разработка: http://96.0.22.228/

Из-за временных ограничений проекта мне пришлось использовать плохие хаки, чтобы страницы выглядели правильно.Я не объявляю <doctype> и заставляю IE использовать режим IE7-quirks.Я хотел бы получить рекомендации о том, как правильно сделать этот макет, используя HTML5 и CSS.Он не должен поддерживать старые браузеры, но он должен выглядеть одинаково в последних версиях Chrome, Firefox и IE.Я также хотел бы покончить с изображениями для меню и стилизовать все в CSS для рамок границ и текста меню.

Несмотря на то, что я должен был завершить сайт как есть, я 'Я готов вернуться и исправить это позже, если есть хороший ответ на эту проблему.

Ответы [ 4 ]

9 голосов
/ 26 марта 2012

100% высоты в ячейке таблицы - это всегда боль.Технически говоря, TD не имеет высоты (потому что это зависит от его содержимого).То, что вы просите, чтобы браузер сделал, это сделайте дочерний элемент 100% его родителя, который является 100% его дочерним элементом, который является 100% его родительского ... Вы можете видеть, как это могло быть проблемой.

Вы можете попробовать добавить явную высоту к TD и использовать макет таблицы: исправлено на столе.По крайней мере, таким образом браузер узнает высоту родительского элемента, не нуждаясь в высоте дочернего элемента, но это все равно может не сработать.

Возможно, вам придется переосмыслить, как вы поступите с этим.

0 голосов
/ 18 июля 2017

Лучшее решение для этого состоит в том, чтобы родительский элемент button также имел высоту 100%, при условии, что вы хотите, чтобы ваша кнопка имела высоту 100%.

например

<tr>
  <td><button class="btn" id="1">1</button></td>
  <td><button class="btn" id="2">2</button></td>
  <td><button class="btn" id="3">3</button></td>
  <td><button class="btn" id="plus">+</button></td>
  <td rowspan="2"><button class="btn btn-block" id="equals">=</button></td>
</tr>

CSS:

td{
    height: 100%;
}
.btn {
    width: 100%;
    height: 100%;
}

Это должно работать нормально

0 голосов
/ 26 марта 2012

Так что здесь все делается с помощью div, абсолютное позиционирование в%, и вот часть, которая вам не понравится, с определенной высотой, заданной в пикселях. Проблема в том, что если вы используете ячейки таблицы (td), у td нет высоты, и поэтому любой элемент внутри будет вычислять 0 для высоты 100%.

Когда мы используем div, проблема в другом. Мы можем убедиться, что они сохраняют свои свойства высоты, но нет никакого способа сказать div слева: «быть такой же высоты, как div в центре». По крайней мере, так, как я знаю. Тем не менее, кажется, что ваш flash-объект - самая высокая вещь, и вы можете легко установить высоту всех трех делителей в идеальное количество пикселей. Затем растяните список навигации ul на высоту до 100% от div, в который он вложен.

Есть еще один способ сделать это, который может лучше удовлетворить ваши потребности, я опишу это в самом низу.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TheDavidFactor's Layout</title>

<style type="text/css">
  body, html {
    background: black;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
  }
  #left {
    position:absolute;
    top:10%;
    left:0;
    background: #eeeeee;
    width: 20%;
    padding: 2%;
    margin:0;
  }
  #right {
    position:absolute;
    top:10%;
    left:76%;
    background: #eeeeee;
    width: 20%;
    padding: 2%;
    margin:0;
  }
  #center {
    position:absolute;
    top:10%;
    left:24%;
    background: #dddddd;
    width: 48%;
    padding: 2%;
    margin:0;
  }
  #flash {
    background:red;
    width: 500px;
    height: 500px;
    padding:0;
    margin:0;
  }
  ul {
    height: 500px;
    padding:0;
    margin:0;
    padding-left:25px;
    background: #4359ac;
    color: #ffffff;
  }
  li {
    height: 10%;
    padding:0;
    margin:0;
  }
</style>

</head>
<body>

<div id="left">
  <ul>
    <li>Spa</li>
    <li>Hotel</li>
    <li>Activities</li>
    <li>Hobbies</li>
    <li>Night Life</li>
    <li>Food</li>
    <li>Feedback</li>
    <li>Contact</li>
    <li>About Us</li>
    <li>Copyright</li>
  </ul>
</div>
<div id="center">
  <div id="flash">Here's your flash Object</div>
</div>
<div id="right">
  here's the right div
  <br>
  <p>Let's throw some random text in here to take up space for now.</p>
</div>

</body>
</html>

Другой вариант, который у вас есть, - это обернуть три столбца в div контейнера и определить высоту для этого div, а затем растянуть каждый столбец до 100% высоты внутри этого div контейнера.

0 голосов
/ 26 марта 2012

У меня есть одно решение, если вам нужны желаемые результаты, вы можете отрегулировать заполнение вашего (td.navigation a class link) , через это вы получите свои результаты.

применить этот CSS: -

td.navigation a {
    color: #837768;
    display: block;
    font-size: 1.2em;
    padding: 14px 5px;
    text-align: center;
    text-decoration: none;
}
...