how to use max-height and display table

Question

how to use max-height and display table

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I have a div that its width and height is according to the content, and I need to leave it in the center of the page, I'm having problem with max-height , it just does not work, min-height works perfectly, when I do not know how to fix it, but I do not know how to do it.

.miniatura
{
	display:table;
	margin:2% auto 0 auto;
	padding:2% 2%;
        max-width:500px;
        max-height:390px;
	width:auto;
        height:auto;
        background:green
}

<div class="miniatura">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

css

asked by anonymous 21.06.2018 / 10:46

2 answers

2

The problem is not in the code but in the box-model concept of CSS, because by default elements like div > are of type block-level .

When you set a display value , some properties will behave differently, after all < div is no longer block-level and table as well as inline-level . Finally your code is ok, but what should be analyzed is the context of the div - table element, or rather its parent.

Below is an example with no excesses using CSS 2.1:

simple diplay Table

21.06.2018 / 15:37

Animate CSS - Correct syntax? Save Field Auto [closed]

score 3 · Accepted Answer

As I told you, see that with display: flex vc aligns the item easily, without needing position or display:table . It runs IE 10 for good forward. (IE9 is used by less than 0.05% of people in Brazil) link

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
section {
  width: 100%;
  height: 100%;
  display: flex;
}
.miniatura
{
  margin: auto;
  padding:2%;
  max-width:500px;
  max-height:390px;
  overflow-y: auto;
  background:green
}

  <section>
    <div class="miniatura">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum maiores numquam provident, soluta, debitis eveniet tempore placeat deserunt perspiciatis ex exercitationem voluptatem neque esse corrupti doloremque qui laudantium. Praesentium enim ipsam necessitatibus dolor veniam fugiat dicta harum. Minima eveniet totam aspernatur facilis numquam corrupti deserunt. Minus, quisquam ex! Incidunt est deserunt dolore unde dolorem error vitae, nobis cum tempore reprehenderit modi quo eum neque quos, cupiditate esse quaerat commodi earum a sit iusto animi. Exercitationem, neque! Dolorum culpa cumque alias excepturi dolores maxime cupiditate assumenda voluptas harum architecto. Fuga enim quae quis corporis! Ipsum eveniet, fuga voluptate cum corporis iusto nisi aut ipsam mollitia sed unde vitae, quas suscipit sint saepe sapiente ab omnis at exercitationem. Nihil soluta ratione rerum amet ad vel laborum eum unde similique alias accusamus consequuntur sequi est reiciendis, doloribus, perspiciatis voluptas repudiandae vitae debitis dolorem at in quo voluptatibus dolores. Nulla odit natus quas aperiam voluptatem, consequatur, nihil incidunt ipsum ex quo alias ab ipsam provident distinctio sint sunt cum obcaecati voluptatibus enim, aut porro. Beatae eveniet voluptatum iusto consequuntur magnam doloremque accusantium maiores dolore necessitatibus corporis saepe, earum nulla amet? Laudantium labore beatae expedita. Perspiciatis placeat quos expedita dignissimos! Deleniti sed voluptatum dolor obcaecati, iste reiciendis repellat exercitationem dolorem necessitatibus? Amet quaerat nemo veritatis quis maxime quae doloribus nostrum, ea minus fuga ad nesciunt alias aspernatur illo ipsam voluptates delectus voluptas aperiam iusto libero. Facilis provident eveniet nemo consequatur voluptatibus aliquid, at libero ipsa exercitationem qui officia atque dolore adipisci odio perspiciatis ex voluptate deleniti nam tenetur soluta ipsum quod quas voluptatem odit? Beatae atque, cumque neque itaque dolor earum quam sit eum corporis facilis dolores quos harum adipisci fugit recusandae esse dicta soluta praesentium eos, sint quis ullam consequatur accusantium. Deleniti iure neque iusto illo esse rem rerum asperiores veniam soluta non? Expedita!
    </div>
  </section>