• This example will use a new attribute "data-watch" set parent height from the child. If the child height is more than the parent height, the parent will automatically expand to match the child's height. The "data-watch" attribute must be set on the child. This will allow the parent to monitor the child's growth or decrease and expand accordingly. The child does not neccessarily need to be a direct child. It can be a grand-child or even below that. "data-auto" attribute should not be used on the parent if there is a child having the attribute of data-watch. Also, data-watch can only be applied on one child which the parent has to monitor. To explain this, a left and right padding of 10pixels has been set on the blue screen (parent element) along with a resize attribute option while the red screen (child element) is set to have an attribute of data-watch. This page is not set as display of grid to explain better


• Attributes: data-height="full" data-resize="resize" and data-watch is applied on the child element


• samples
  • Home
  • sample 1
  • sample 2
  • sample 3
  • sample 4
  • sample 6

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure ad placeat quis, veniam ipsam quia provident dolorum praesentium necessitatibus similique quaerat vero aspernatur nesciunt inventore voluptas possimus. Vel, iusto qui? Nostrum, doloremque consequuntur. Repudiandae molestiae atque dolores eligendi quisquam ut unde similique quasi fugiat exercitationem, tenetur expedita ab at incidunt recusandae eaque quaerat beatae possimus nemo quam ipsum reiciendis hic. Numquam mollitia ea soluta! Officia eum, ut voluptates voluptatibus recusandae commodi optio dicta odio repudiandae! Ab, vero obcaecati. Ad, beatae! Qui soluta quae nam repellendus. Harum quia earum assumenda iusto? Explicabo maxime cupiditate rem assumenda cumque quaerat tenetur facilis! Consequatur magnam eius temporibus inventore pariatur, voluptates dignissimos a fugit nisi in ipsam dolorum perferendis ab mollitia. Quod est ipsam, fugiat provident mollitia accusamus nesciunt obcaecati? Perspiciatis ea at esse! Officia inventore ipsa ut dolorem, ratione labore incidunt similique tempora quisquam accusantium assumenda quidem cupiditate nulla. Non assumenda minus sunt consectetur rem sapiente libero obcaecati suscipit qui impedit adipisci facilis error debitis velit iste mollitia sit, odio nisi harum! Dolor aut at dolore libero esse, dolorem error impedit, commodi fugit qui earum nihil dicta reiciendis obcaecati vero deleniti nisi sapiente quasi ratione iste quam cumque? inventore eligendi mollitia quas ratione architecto!