# Ionic Tabs For Part of Screen

**URL:** <https://forum.ionicframework.com/t/ionic-tabs-for-part-of-screen/18727>\
**Category:** ionic-v1\
**Created:** [March 7, 2015, 10:00am UTC](https://forum.ionicframework.com/t/ionic-tabs-for-part-of-screen/18727 "2015-03-07T10:00:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Judo](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@Judo](https://forum.ionicframework.com/u/Judo)\
**Post date:** [March 7, 2015, 10:00am UTC](https://forum.ionicframework.com/t/ionic-tabs-for-part-of-screen/18727/1 "2015-03-07T10:00:14Z")

</div>

I’d like to use Ionic tabs for the bottom half of the screen so that clicking a tab will just change the lower half of the screen. None of the the configs I tired seem to work - are there any demos showing this type of setup?

Thanks

---

<div class="post-metadata">

**Author:** ![BioPhoton](https://avatars.discourse-cdn.com/v4/letter/b/a3d4f5/32.png) [@BioPhoton](https://forum.ionicframework.com/u/BioPhoton)\
**Post date:** [March 7, 2015, 12:57pm UTC](https://forum.ionicframework.com/t/ionic-tabs-for-part-of-screen/18727/2 "2015-03-07T12:57:53Z")

</div>

You can use the [ionic css](http://ionicframework.com/docs/components/#tabs) classes and do normal ng.  
See example below.

```
<div class="tabs">
      <a class="tab-item" ng-click="hometab = !hometab">
        Home
      </a>
      <a class="tab-item" ng-click="favtab = !favtab">
        Favorites
      </a>
      <a class="tab-item" ng-click="settingstab = !settingstab">
        Settings
      </a>
    </div>

<div ng-show="hometab ">
home
</div>
<div ng-show="favtab ">
Favourites
</div>
<div ng-show="settingstab ">
Settings
</div>

```

---

<div class="post-metadata">

**Author:** ![unstephenk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/unstephenk/32/12807_2.png) [@unstephenk](https://forum.ionicframework.com/u/unstephenk)\
**Post date:** [June 18, 2015, 3:58am UTC](https://forum.ionicframework.com/t/ionic-tabs-for-part-of-screen/18727/3 "2015-06-18T03:58:52Z")

</div>

You can add a tag to ion-content like the example below:

```
<ion-view view-title="Friends">
<ion-content class="margin">
<p>This is the Friends page</p>
</ion-content>

```

Then in your style.css you can add a rule as follows:

```
.margin{
    margin-top: 30%;
    border-top: dotted;
}
```